<template>
  <div  v-loading="loading" class="box">
    <canvas id="canvasId" v-if="showcanvas==true" >
    </canvas>
    <div v-if='showcanvas==true'>
       <div class="step1" v-if='step==1'>
        <div class="sanjiaoup"></div>
        <div class="steptishi">点击这里可以上传文件及文件夹</div>
        <div class="stepnext" @click="nextstep(2)">下一步 <img style="margin-right:10px;" src="../assets/gengduow.png" alt=""></div>
      </div>

      <div class=" step1 step2 " v-if='step==2'>
        <div class="sanjiaoup1"></div>
        <div class="steptishi">点击这里进行文档管理</div>
        <div class="stepnext" @click="nextstep(3)">下一步 <img style="margin-right:10px;" src="../assets/gengduow.png" alt=""></div>
      </div>

      <div class=" step1 step3" v-if='step==3'>
        <div class="sanjiaoup"></div>
        <div class="steptishi">点击这里操作文件</div>
        <div class="stepbtn" @click="nextstep(4)">立即开始</div>
      </div>
    </div>

    <el-container style="height: 100%;">
      <el-aside width="240px" style="background: #393939;">
        <div class="app-logo" @click="kuaisukaishi">
          <img src="../assets/logo@3x.png" alt />
          <div style="display: inline-block;line-height:25px;">无界文档</div>
        </div>
        <div class="app-begin" @click="kuaisukaishi" :class="selectqian==1?'selectqianactive':''">
          <img src="../assets/fangwen-2@3x.png" alt />
          <div>快速开始</div>
        </div>
        <div class="app-my">
          <!-- <img src="../assets/yun.png" alt="">
          <div>我的文件</div>-->
          <el-tree
            
            :data="data5"
            node-key="id"
            style="background-color: #393939;"
            :highlight-current="highlight"
            default-expand-all
            ref="tree"
          >

           <!-- @node-click="xuanzhongwjj" -->
            <div style="flex:1;width:0px;height:100%;" @click.stop="xuanzhongwjj(data,node)" class="custom-tree-node df ccslh " slot-scope="{ node, data }">
              <img v-if='data.style==0' style="width:20px; margin-right:12px;" src="../assets/wodewenjian@2x.png" alt="">
              <img v-if='data.style==1' style="width:20px; margin-right:12px;" src="../assets/-folder-personal@2x.png" alt="">
              <div class="ccslh">
                {{ data.name }}
              </div>
            </div>
          </el-tree>
        </div>
        <div class="app-recycle" @click="huishouzhan"  style="cursor:pointer" :class="selectqian==3?'selectqianactive':''">
          <img src="../assets/huishouzhan.png" alt />
          <div style="display: inline-block;">回收站</div>
        </div>
      </el-aside>

      <el-container>
        <div class="shangxia">
          <!-- 搜索 -->
          <div class="search" v-if="showsousuo==true">
            <div class="searchkuang">
              <img class="searchkuang-img1" src="../assets/search.png" alt />
              <img class="searchkuang-img2" @click="gaojisousuo" src="../assets/sigang.png" alt />
              <input
                @focus="searchkuang"
                @blur="quxiaojiaodian"
                class="sousuo"
                type="text"
                placeholder="搜索标题/文件"
                v-model="searchdezhi"
              />
              <div class="sousuoxialakuang" v-if="searchshow == true">
                <div class="sousuoxialatit">最近浏览</div>
                <div class="sousuoxiakajihe" v-show="searchxialalist.length != 0">
                  <div class="gaojixia-left-item"  style="cursor: pointer;" v-for="(item,index) in searchxialalist" :key="index"  @click="searchjinwenjianjia($event,index,item.fileType)">
                    <!-- 0文件夹 1文件 2 图 3 视频 4音 5压缩 6其他 -->
                    <img class="imgbox1" v-if='item.fileType==0' src="../assets/gaoji/wenjianjia.png" alt />
                    <div  v-if='item.fileType==1'>
                      <img v-if='item.fileFormat=="doc"||item.fileFormat=="docx"' src="../assets/gaoji/doc.png" alt />
                        <img v-if='item.fileFormat=="xls"||item.fileFormat=="xlsx"' src="../assets/gaoji/xls.png" alt />
                        <img v-if='item.fileFormat=="wpd"||item.fileFormat=="ppt"||item.fileFormat=="pptx"' src="../assets/gaoji/ppt.png" alt />
                        <img v-if='item.fileFormat=="pdf"' src="../assets/gaoji/pdf.png" alt />
                        <img v-if='"doc docx xls xlsx wpd pptx ppt pdf".indexOf(item.fileFormat)==-1' src="../assets/gaoji/qita.png" alt />
                    </div>
                    <img v-if='item.fileType==2' src="../assets/gaoji/tu.png" alt />
                    <img v-if='item.fileType==3' src="../assets/gaoji/video.png" alt />
                    <img v-if='item.fileType==4' src="../assets/gaoji/yinpin.png" alt />
                    <img v-if='item.fileType==5' src="../assets/gaoji/yasuobao.png" alt />
                    <img v-if='item.fileType==6' src="../assets/gaoji/qita.png" alt />
                    <div class="gaojixia-left-item-wenben">
                      <p class="gaojixia-left-item-wenben1">{{item.fileName}}</p>
                      <p class="gaojixia-left-item-wenben2">最后更新于{{item.createTime}}</p>
                    </div>
                  </div>
                </div>
                <div class="sousuoxiakajihe"  v-show="searchxialalist.length == 0">
                  <div class="zanwukuang" style="cursor: pointer;">
                    <img src="../assets/zanwukuang.png" alt="">
                    <div>没有找到符合条件的结果</div>
                  </div>
                </div>
                <div class="gaojisousuoanniu" @click="gaojisousuo" style="cursor: pointer;">
                  <img src="../assets/gaojisousuotu.png" alt />
                  <div>高级搜索</div>
                </div>
              </div>
            </div>
            <div class="search-portrait">
              <!-- <img class='shoushou' style="width:22px;height:22px;margin-right:22px;" src="../assets/kefu@3x.png" alt /> -->
              <img
                class='shoushou'
                @click="shezhishows"
                style="width:34px;height:34px; border-radius:50%;margin-right:24px;"
                :src="userInfo.pcAvatarUrl=='undefined'?userInfo.avatarUrl:userInfo.pcAvatarUrl"
                alt
              />
              <div class="shezhi" v-show="shezhishow"  style="cursor: pointer;">
                <div class="shezhi1 name">
                  <p>{{userInfo.pcNickName?userInfo.pcNickName:userInfo.nickName}}</p>
                </div>
                <div class="shezhi1 she" @click="shezhis">
                  <p>设置</p>
                  <img
                    src="../assets/gengduo-10@2x.png"
                    style="width:5px;height:10px;margin-right:26px;"
                    alt
                  />
                </div>
                <div class="xinshou">
                  <p>新手教程</p>
                </div>
                <div class="tuichu " @click="tuichudenglu">
                  <p>退出登录</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 主页 -->
          <div style="height:60px;padding-top:20px;box-sizing: border-box;" v-if="showwodewenjian==true">
            <!-- 我的文件 -->
            <div class="zhuye">
              <div class="zhuye1" v-if="selectqian==2" >
                <span v-for="(item,index) in mianbaoxie" :key=index class="displayflex shoushou" @click="tothismbx(item)" >
                  <img  v-if='index!=0'  style="margin:0 10px;height:20px;" src="../assets/gengduo.png" alt="">
                  {{item.data.name}}
                </span>
                
              </div>
              <div class="zhuye1" v-if="selectqian==1" >主页</div>
              <div class="zhuye2">
                <div class="zhuyess">
                  <button class="zhuye3 shoushou" @click="tianjiawenjianjia">添加文件夹</button>
                </div>
                

                <!-- <button class="zhuye4">上传文件夹</button> -->
                <div class="zhuye4 shoushou">
                  上传文件
                  <input
                    style="opacity: 0;"
                    type="file"
                    class="upload shoushou"
                    multiple
                    @change="uploadFile"
                    limit='5'
                    ref="inputer"
                    title=""
                    
                  />
                </div>

                <div class="zhuyekuang" v-show="zhuyeshow">

                  <div class="zhuyekuang1">
                    <img style="width:22px;height:18px;" src="../assets/shangchuanjiantou.png" alt />
                    <p>上传文件夹</p>

                    <input
                      v-show='otherinput==true'
                      style="opacity: 0;"
                      type="file"
                      webkitdirectory 
                      mozdirectory
                      class="upload uploadinput"
                      limit="1"
                      @change="uploadFile1"
                      @click="uploadFile1click"
                      ref="inputer1"
                      title=""
                    />

                    <input
                      v-show='otherinput==false'
                      style="opacity: 0;"
                      type="file"
                      webkitdirectory 
                      mozdirectory
                      class="upload uploadinput"
                      limit="1"
                      @change="uploadFile1"
                      @click="uploadFile1click"
                      ref="inputer111"
                      title=""
                    />


                  </div>

                  <div class="zhuyekuang1" @click="xinjian_wjj">
                    <img src="../assets/xinjianwenjianjia.png" alt />
                    <p>新建文件夹</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 回收站清空 -->
          <div class="zhuye" v-if="showhuishouzhan==true">
            <div class="zhuye1">回收站</div>
            <div class="qingkong shoushou" @click="clickclear">清空</div>
          </div>

          

          <div>
            <!-- 归我所有 -->
            <div class="lately"  v-if="showgenlist==true" :class="[selectqian==1?'over':'']">
              <!-- 常用 -->
              <div v-if="showzhuyechangyong==true">
                <!-- 常用 -->
                <div class="changyong" v-if='changyonglist.length>0'>
                  <div class="changyongqian">
                      
                    <img @click="changyongshow" v-if='changyongbox==true' style="width:14px;height:14px;" src="../assets/yxz.png" alt="">
                    <img @click="changyongshow" v-if='changyongbox==false' style="width:14px;height:14px;" src="../assets/wxz.png" alt="">
                    
                    <div class="headtitle">常用</div>
                  </div>
                  <div class="changyong2">

                    <div class="changyongitem" v-for="(item,index) in changyonglist" :key=index @click="tiaozhuanjinqu($event,index,item.fileType)">
                      <div class="changyong4" :class="[item.checked==true&&changyongbox==true?'latelyitemactive':'']">
                        <img class="changyongxuanze" @click.stop="changyongselect(index)" v-if='item.checked==true&&changyongbox==true' style="width:14px;height:14px;" src="../assets/yxz.png" alt="">
                        <img class="changyongxuanze"  @click.stop="changyongselect(index)" v-if='item.checked==false&&changyongbox==true' style="width:14px;height:14px;" src="../assets/wxz.png" alt="">
                        <div class="changyong3">
                          <div class="chang3-left">
                            <div class="c3-l-l">
                              <!-- <img src="../assets/dawenjian.png" alt /> -->
                              <!-- 0文件夹 1文件 2 图 3 视频 4音 5压缩 6其他 -->
                              <img class="imgbox1" v-if='item.fileType==0' style="width:32px;" src="../assets/changlist/wenjianjia.png" alt />
                              <div  v-if='item.fileType==1'>
                                <img class="imgbox1" style="margin-left:4px;" v-if='item.fileFormat=="doc"||item.fileFormat=="docx"' src="../assets/changlist/doc.png" alt />
                                  <img class="imgbox1" style="margin-left:4px;" v-if='item.fileFormat=="xls"||item.fileFormat=="xlsx"' src="../assets/changlist/xls.png" alt />
                                  <img class="imgbox1" style="margin-left:4px;" v-if='item.fileFormat=="wpd"||item.fileFormat=="ppt"||item.fileFormat=="pptx"' src="../assets/changlist/ppt.png" alt />
                                  <img class="imgbox1" style="margin-left:4px;" v-if='item.fileFormat=="pdf"' src="../assets/list/pdf.png" alt />
                                  <img class="imgbox1" style="margin-left:4px;" v-if='"doc docx xls xlsx pptx wpd ppt pdf".indexOf(item.fileFormat)==-1' src="../assets/changlist/qita.png" alt />
                              </div>
                              <img class="imgbox1" style="margin-left:4px;" v-if='item.fileType==2' src="../assets/changlist/tu.png" alt />
                              <img class="imgbox1" style="margin-left:4px;" v-if='item.fileType==3' src="../assets/changlist/video.png" alt />
                              <img class="imgbox1" style="margin-left:4px;" v-if='item.fileType==4' src="../assets/changlist/yinpin.png" alt />
                              <img class="imgbox1" style="margin-left:4px;" v-if='item.fileType==5' src="../assets/changlist/yasuobao.png" alt />
                              <img class="imgbox1" style="margin-left:4px;" v-if='item.fileType==6' src="../assets/changlist/qita.png" alt />
                            </div>
                            <div class="c3-l-r">
                              <p class="c3-l-r-p1" :title="item.fileName">{{item.fileName}}</p>
                              <p class="c3-l-r-p2">最后更新于{{item.riqi}} {{item.time}}</p>
                            </div>
                          </div>
                          <div class="chang3-right">
                            <img class="chang3tu" v-if="changyongbox == false&&item.showtc==false" src="../assets/shengluehao2.png" alt />
                            <img class="chang3tu disposiss" v-if="showhuishouzhan==false&&item.showtc==true" src="../assets/shengluehao2.png" alt />
                          </div>
                        </div>
                      </div>  
                      <div>
                        
                        <div class="clicktc"  :style="{left: tranLeft, top: tranTop}" v-if="showhuishouzhan==false&&item.showtc==true">
                          <div class='changyong'>取消常用</div>
                          <div class="xingbiao" v-if="item.isFollow == 0">设为星标</div>
                          <div class="xingbiao" v-if="item.isFollow == 1">取消星标</div>
                          <div class="xian"></div>
                          <div class="fenxiang">
                            分享
                            
                          </div>
                          <div v-if="item.fileType!=0" class="xiazai" >下载
                              <img style="width:5px;height:10px;" src="../assets/gengduo-10@2x.png" alt />
                              <div class="erji" :class="[(index+1)% cylistnum==0?'erjileft':'']" >
                                
                              <div class='yuanshi' >原始文件</div>
                              <div v-if="item.isCreatePdf==1" class="pdfdown">只读版本(pdf)</div>
                            </div>
                          </div>

                          <div v-if="item.fileType==0" class="dabaoxiazai">打包下载
                            <!-- <img style="width:5px;height:10px;" src="../assets/gengduo-10@2x.png" alt /> -->
                          </div>
                          
                          <div class="xian"></div>
                          <div class="yidong">移动到</div>
                          <div class="fuzhidao">复制到</div>
                          <div class="xian"></div>
                          <div class='chongmingming'>重命名</div>
                          <div class="shanchu">删除</div>
                        </div>
                      </div>
                      
                    </div>


                  </div>
                </div>
              </div>


              <div class="latelyhead">
                <div class="zuijinqian">
                  <img class='shoushou' @click="showbox" v-if="showallbox==true" style="width:14px;height:14px;" src="../assets/yxz.png" alt />
                  <img class='shoushou' @click="showbox" v-if="showallbox==false" style="width:14px;height:14px;" src="../assets/wxz.png" alt />

                  <div v-if="selectqian==2||selectqian==3" class="headtitle">多选</div>
                  <div v-if="selectqian==1" class="headtitle">最近</div>
                </div>
                <div class="shaixuanbox">
                  <div @click="shaixuan11tc" class="shaixuan11">
                    <img class='shoushou' v-if="shaixuan11==false" style="width:16px;height:12px" src="../assets/shaixuan3.png" alt />
                    <img class='shoushou' v-if="shaixuan11==true" style="width:16px;height:12px" src="../assets/shaixuan3_ss.png" alt />

                    <div class="shaixuan11tc" v-if="shaixuan11==true">
                      <div class="lable">按时间段</div>
                      <div class="laitem" :class="[this.listsxtime==0?'jc':'']" @click="setsx_index('listsxtime',0)">全部</div>
                      <div class="laitem" :class="[this.listsxtime==1?'jc':'']" @click="setsx_index('listsxtime',1)">今天</div>
                      <div class="laitem" :class="[this.listsxtime==2?'jc':'']" @click="setsx_index('listsxtime',2)">最近3天</div>
                      <div class="laitem" :class="[this.listsxtime==3?'jc':'']" @click="setsx_index('listsxtime',3)">最近7天</div>
                      <div class="laitem" :class="[this.listsxtime==4?'jc':'']" @click="setsx_index('listsxtime',4)">最近30天</div>
                      <div class="xian"></div>
                      <div class="lable">按类型</div>
                      <div class="laitem" :class="[this.listsxstyle==0?'jc':'']" @click="setsx_index('listsxstyle',0)">全部</div>
                      <div class="laitem" :class="[this.listsxstyle==1?'jc':'']" @click="setsx_index('listsxstyle',1)">文档</div>
                      <div class="laitem" :class="[this.listsxstyle==2?'jc':'']" @click="setsx_index('listsxstyle',2)">图片</div>
                      <div class="laitem" :class="[this.listsxstyle==3?'jc':'']" @click="setsx_index('listsxstyle',3)">其他文件</div>
                    </div>
                  </div>
                  <img src="../assets/shuxian.png" alt />
                  <img class='shoushou' v-if="moshi!=1" @click="qiehuan(1)"  style="width:12px;height:12px" src="../assets/shaixuan.png" alt />
                  <img class='shoushou' v-if="moshi==1" @click="qiehuan(1)"  style="width:12px;height:12px" src="../assets/shaixuan_ss.png" alt />
                  <img class='shoushou' v-if="moshi!=2" @click="qiehuan(2)"  style="width:14px;height:12px;margin-left:6px;" src="../assets/shaixuan2.png" alt />
                  <img class='shoushou' v-if="moshi==2" @click="qiehuan(2)"  style="width:14px;height:12px;margin-left:6px;" src="../assets/shaixuan2_ss.png" alt />
                </div>
              </div>

               <!-- 0文件夹 1文件 2 图 3 视频 4音 5压缩 6其他 -->
              <div class="latelynr" :class="[selectqian==1?'height1':'']" v-if="moshi==1&& treeclicklist.length!=0">
                <div class="latelyitemli" v-for="(item,index) in treeclicklist" :key="index">
                 

                  <div class="latelyitem"  :class="[item.checked==true&&showallbox==true?'latelyitemactive':'']">
                    <!-- 选中 -->
                    <img
                      class="selectbox"
                      @click="danselect(index)"
                      v-if="item.checked==true&&showallbox==true"
                       style="width:14px;height:14px;"
                      src="../assets/yxz.png"
                      alt
                    />
                    <img
                      class="selectbox"
                      @click="danselect(index)"
                      v-if="item.checked==false&&showallbox==true"
                       style="width:14px;height:14px;"
                      src="../assets/wxz.png"
                      alt
                    />

                    <div
                      class="latelyitembody"

                      @click="towenjianjia($event,index,item.fileType)"

                      :class="[showallbox==true?'noclick':'']"
                    >
                      <img
                        v-if="item.showtc==false&&showallbox==false"
                        class="shengluehover isshengluehao"
                        id='shengluehover'
                        style="cursor: pointer;"

                        src="../assets/shengluehao2.png"
                        alt
                      />

                      <div class="imgbox" v-if="item.fileType==0">
                        <img class="imgbox1" style="margin-top:10px;" src="../assets/da/wenjianjia.png" alt />
                      </div>

                      <div class="imgbox" v-if="item.fileType==1">

                        <img class='imgbox1' v-if='item.fileFormat=="doc"||item.fileFormat=="docx"' src="../assets/da/doc.png" alt />
                        <img class='imgbox1' v-if='item.fileFormat=="xls"||item.fileFormat=="xlsx"' src="../assets/da/xls.png" alt />
                        <img class='imgbox1' v-if='item.fileFormat=="wpd"||item.fileFormat=="ppt"||item.fileFormat=="pptx"' src="../assets/da/ppt.png" alt />
                        <img  class='imgbox1' v-if='item.fileFormat=="pdf"' src="../assets/da/pdf.png" alt />

                        <img class='imgbox1' v-if='"doc docx xls xlsx wpd ppt pptx pdf".indexOf(item.fileFormat)==-1' src="../assets/da/qita.png" alt />
                        
                      </div>

                      <div class="imgbox" style="padding:0px;height:124px;display: flex;justify-content: center;align-items: center;margin-bottom: 16px;" v-if="item.fileType==2">
                        <img class='imgbox1' style="height:100%;" :src="item.thumbnail" alt />
                      </div>

                       <div class="imgbox" v-if="item.fileType==3||item.fileType==4||item.fileType==5||item.fileType==6">
                        <img class='imgbox1' v-if='item.fileType==3' src="../assets/da/video.png" alt />
                        <img class='imgbox1' v-if='item.fileType==4' src="../assets/da/yinpin.png" alt />
                        <img class='imgbox1' v-if='item.fileType==5' src="../assets/da/yasuobao.png" alt />
                        <img class='imgbox1' v-if='item.fileType==6' src="../assets/da/qita.png" alt />
                      </div>

                      <div class="itemname namesss" :title="item.fileName">{{item.fileName}}</div>
                      <div class="itemtime">{{item.updateTime}}</div>

                      <div><img v-if="item.isFollow" class="isshoucang" src="../assets/shoucang.png" alt /></div>

                      <img
                        v-if="item.showtc==true"
                        class="isshengluehao"
                       
                        src="../assets/shengluehao2.png"
                        alt
                      />

                      <div class="clicktc" v-if="showhuishouzhan==false&&item.showtc==true">
                        <div class='changyong' v-if="item.isCommonly == 0">设为常用</div>
                        <div class='changyong' v-if="item.isCommonly == 1">取消常用</div>
                        <div class="xingbiao" v-if="item.isFollow == 0">设为星标</div>
                        <div class="xingbiao" v-if="item.isFollow == 1">取消星标</div>
                        <div class="xian"></div>
                        <div class="fenxiang">
                          分享
                          
                        </div>
                        <div v-if="item.fileType!=0" class="xiazai" >下载
                          <img style="width:5px;height:10px;" src="../assets/gengduo-10@2x.png" alt />
                            <div class="erji" :class="[(index+1)% listnum==0?'erjileft':'']">
                            <div class='yuanshi' >原始文件</div>
                            <div v-if="item.isCreatePdf==1" class="pdfdown">只读版本(pdf)</div>
                          </div>
                        </div>

                        <div v-if="item.fileType==0" class="dabaoxiazai">打包下载
                          <!-- <img style="width:5px;height:10px;" src="../assets/gengduo-10@2x.png" alt />                        -->
                        </div>
                        
                        <div class="xian"></div>
                        <div class="yidong">移动到</div>
                        <div class="fuzhidao">复制到</div>
                        <div class="xian"></div>
                        <div class='chongmingming'>重命名</div>
                        <div class="shanchu">删除</div>
                      </div>

                      <div class="clicktc" v-if="showhuishouzhan==true&&item.showtc==true">
                        <div class='huifu'  style="cursor:pointer">恢复</div>
                        <div class="chedishanchu"  style="cursor:pointer">彻底删除</div>
                      </div>
                    </div>

                    

                  </div>
                </div>

                
              </div>

              <div class="latelynr" :class="[selectqian==1?'height1':'']" v-if="moshi==2&& treeclicklist.length!=0" style="padding: 0px 24px 120px 24px">
                <div class="latelynrhead">
                  <div class="name">名称</div>
                  <div class="shijian" @click="tcpaixu" style="cursor:pointer">
                    {{this.listpaixu==0?'最近查看':'最近上传'}}
                    <img src="../assets/sanjiao.png" alt />
                    <div class="tcpxbox" v-if="istcpx==true">
                      <div style="font-size:12px;color: #7E7E8B;">排序</div>

                     
                      <div  class='hoo' style="cursor:pointer" :class="[this.listpaixu==0?'ho':'']" @click="setsx_index('listpaixu',0)">最近查看</div>
                      <div  class='hoo' style="cursor:pointer" :class="[this.listpaixu==1?'ho':'']" @click="setsx_index('listpaixu',1)">最近上传</div>

                    </div>
                  </div>
                  <div class="gengduo" style="padding-left: 126px;box-sizing: border-box;">更多</div>
                </div>

                <div class="latelyitem2" v-for="(item,index) in treeclicklist" :key="index"  @click="towenjianjia2($event,index,item.fileType)" >
                  <div class="namelie" style="line-height:20px;cursor: pointer">
                    <img
                      class="selectbox1"
                      @click="danselect(index)"
                      v-if="item.checked==true&&showallbox==true"
                       style="width:14px;height:14px;"
                      src="../assets/yxz.png"
                      alt
                    />
                    <img
                      class="selectbox1"
                      @click="danselect(index)"
                      v-if="item.checked==false&&showallbox==true"
                       style="width:14px;height:14px;"
                      src="../assets/wxz.png"
                      alt
                    />

                    <img class="imgbox1" style="width:20px;" v-if='item.fileType==0' src="../assets/list/wenjianjia.png" alt />

                    <div  v-if='item.fileType==1' style="display:flex;align-items:center;height:21px;">
                      <img  class="imgbox1" v-if='item.fileFormat=="doc"||item.fileFormat=="docx"' src="../assets/list/doc.png" alt />
                        <img  class="imgbox1" v-if='item.fileFormat=="xls"||item.fileFormat=="xlsx"' src="../assets/list/xls.png" alt />
                        <img  class="imgbox1" v-if='item.fileFormat=="wpd"||item.fileFormat=="ppt"||item.fileFormat=="pptx"' src="../assets/list/ppt.png" alt />
                        <img  class="imgbox1" v-if='item.fileFormat=="pdf"' src="../assets/list/pdf.png" alt />

                        <img  class="imgbox1" v-if='"doc docx xls xlsx wpd ppt pptx pdf".indexOf(item.fileFormat)==-1' src="../assets/list/qita.png" alt />
                    </div>

                    <img  class="imgbox1" v-if='item.fileType==2' src="../assets/list/tu.png" alt />

                    <img  class="imgbox1" v-if='item.fileType==3' src="../assets/list/video.png" alt />
                    <img   class="imgbox1" v-if='item.fileType==4' src="../assets/list/yinpin.png" alt />
                    <img  class="imgbox1" v-if='item.fileType==5' src="../assets/list/yasuobao.png" alt />
                    <img  class="imgbox1" v-if='item.fileType==6' src="../assets/list/qita.png" alt />

                    <div class="itemname" style="margin:0" :title="item.fileName">{{item.fileName}}</div>
                    
                    <img   v-if='item.isFollow' style='margin-left:8px;width:14px;height:14px;' src="../assets/scicon1.png" alt />
                  </div>
                  <div class="itemtimelie">{{item.updateTime}}</div>

                  <div class="czbox" :class="[showallbox==true?'noclick':'']">
                    <div class="czbox-posi">
                      <img v-if="showhuishouzhan==false" class="xiazaihao" src="../assets/xiazai.png" alt />

                      <div class="xiazaixiaokuang">

                        <div v-if="item.fileType!=0" class="yuanshiwenjian" style='cursor: pointer'>原始文件</div>
                        <div v-if="item.fileType!=0&&item.isCreatePdf==1" style='cursor: pointer'  class="zhidubanben">只读版本（pdf）</div>

                        <div v-if="item.fileType==0" class="dabaoxiazai " style='cursor: pointer'>打包下载</div>
  
                      </div>

                    </div>
                    

                    <img v-if="showhuishouzhan==false" class="fenxianghao" style="cursor: pointer; width:16px;" src="../assets/fenxiang@3x.png" alt />

                    <div class="isshengluehaoliess">
                      <div class="isshengluehaolie">
                        <img class="isshengluehaolieimg" style="cursor: pointer;"  src="../assets/shengluehao.png" alt />
                      </div>
                      
                      <div class="clicktc ppp"  v-if="showhuishouzhan==false&&item.showtc==true">
                        <div class='changyong' v-if="item.isCommonly == 0">设为常用</div>
                        <div class='changyong' v-if="item.isCommonly == 1">取消常用</div>
                        <div class="xingbiao" v-if="item.isFollow == 0">设为星标</div>
                        <div class="xingbiao" v-if="item.isFollow == 1">取消星标</div>
                        <div class="xian"></div>
                        
                        <div class="yidong">移动到</div>
                        <div class='fuzhidao'>复制到</div>
                        <div class="xian"></div>
                        <div class="chongmingming">重命名</div>
                        <div class="shanchu">删除</div>
                      </div>
                    </div>
                    

                    

                    <div class="clicktc" v-if="showhuishouzhan==true&&item.showtc==true">
                      <div class="huifu">恢复</div>
                      <div class="chedishanchu">彻底删除</div>
                     
                    </div>

                  </div>
                </div>
              </div>

              
              <div class="zanwu" v-if=" treeclicklist.length==0">
                <img src="../assets/zanwu.png" alt />
              </div>
              
            </div>

           
            <!-- <div class="clicktc" style='height:60px;' v-if="showtc0==true">
              <div>恢复</div>
              <div @click="dangeshanchu(1,2)">彻底删除</div>
            </div>-->


          </div>
        </div>

        <!-- 最近底部 -->
        <div class="dibutc" v-if="showallbox==true">
          <div class="dibutcbox"  v-if='showhuishouzhan==false'>
            <img
            @click="cselectall"
            v-if="selectall==true&&showallbox==true"
             style="width:14px;height:14px;"
            src="../assets/yxz.png"
            alt
             class="shoushou"
            />
            <img
              @click="cselectall"
              v-if="selectall==false&&showallbox==true"
               style="width:14px;height:14px;"
              src="../assets/wxz.png"
              alt
              class="shoushou"
            />
            <div class="dbbtn shoushou" @click="pl_caozuo('plfenxiang')">分享</div>
            <div class="dbbtn shoushou"  @click="pl_caozuo('plyidongdao')">移动到</div>
            <div class="dbbtn shoushou"  @click="pl_caozuo('plxiazai')" >打包下载</div>
            <div class="sc dbbtn shoushou" @click="pl_caozuo('plshanchu')">删除</div>
          </div>
          <div class="dibutcbox" v-if='showhuishouzhan==true'>
            <img
            @click="cselectall"
            v-if="selectall==true&&showallbox==true"
             style="width:14px;height:14px;"
            src="../assets/yxz.png"
            alt
            />
            <img
              @click="cselectall"
              v-if="selectall==false&&showallbox==true"
               style="width:14px;height:14px;"
              src="../assets/wxz.png"
              alt
            />
            <div class="dbbtn" @click="pl_caozuo('huifu')">恢复</div>
            <div class="sc dbbtn" @click="pl_caozuo('chedishanchu')">彻底删除</div>
          </div>
        </div>

        <!-- 常用底部 -->
        <div class="changyongdingwei" v-if="changyongbox==true">
          <div class="changyongdibutc" >
            <img class ='shoushou'  @click="changyongquanxuan" v-if='changyongall==true&&changyongbox==true'  style="width:14px;height:14px;" src="../assets/yxz.png" alt="">
            <img class ='shoushou'  @click="changyongquanxuan" v-if='changyongall==false&&changyongbox==true'  style="width:14px;height:14px;" src="../assets/wxz.png" alt="">
            <div class=" dbbtn shoushou" @click="pl_caozuocy('plfenxiang')">分享</div>
            <div class=" dbbtn shoushou" @click="pl_caozuocy('plxiazai')">打包下载</div>
            <div class=" dbbtn shoushou" @click="pl_caozuocy('plyichu')" >从常用中移除</div>
          </div>
        </div>

      </el-container>
    </el-container>

    <!-- 头像更改框 -->
    <div class="querenshanchu" v-show="gaishow==true">
      <div class="gaikuang">
        <div class="gai1">
          <img class="cha" @click="gaojicha(1)" src="../assets/cha.png" alt />
          <div class="tishi">设置</div>
        </div>
        <div class="gai2">
          <img  :src="tempurl==''?userInfo.pcAvatarUrl?userInfo.pcAvatarUrl:userInfo.avatarUrl:tempurl" />
          <!-- <div v-show="progressFlag" class="head-img">
          </div>-->
          <!-- <el-upload class="img-btn" action="#" :show-file-list="false">
            <button class="gaibutton">更改头像</button>
          </el-upload> -->

          <button class="gaibutton" style="position: relative;cursor: pointer;">更改头像
            <input
              style="opacity: 0;height:100%;"
              type="file"
              class="upload"
              limit="1"
              @change="changeuserinfofile"
              multiple
              ref="inputer10"
              accept="image/*"
              title=""
            />
          </button>
           
        </div>
        <div class="gai3">
          <p class="gai3xingming">姓名</p>
          <input  class="gai3input" ref="inputer11" :value="userInfo.pcNickName?userInfo.pcNickName:userInfo.nickName"  type="text" />
        </div>

        <div class="bcuserinfo"  @click="sureupUserinfo" style="cursor: pointer;">保存</div>
      </div>
    </div>

    <!-- 高级搜索框 -->
    <div class="querenshanchu" v-show="gaojisousuotc==true">
      <div class="gaojikuang">
        <div class="gaojitop">
          <input type="text" placeholder="搜索标题/文件" v-model="sousuozhi" />
          <img @click="gaojisearchajax" class="gaojitop-sousuo" src="../assets/search.png" alt />
          <img @click="gaojicha(2)" class="gaojitop-cha" src="../assets/cha.png" alt />
        </div>
        <div class="gaojizhong">
          <button
            @click="gaojibtn(0)"
            class="gaojizhong1"
            :class="gaojibuttonyanse == 0 ? 'gaojibuttonyanse' : ''"
             style="cursor: pointer;"
          >最近查看</button>
          <button
            @click="gaojibtn(1)"
            class="gaojizhong2"
            :class="gaojibuttonyanse == 1 ? 'gaojibuttonyanse' : ''"
             style="cursor: pointer;"
          >最近上传</button>
        </div>
        <div class="gaojixia">
          <div class="gaojixia-left" v-show="gaojiyou == true">
            <div class="gaojixia-left-item" style="cursor: pointer;" v-for="(item,index) in gaojilist" :key="index"   @click="gaojisearchjinwenjianjia($event,index,item.fileType)">
							<!-- 0文件夹 1文件 2 图 3 视频 4音 5压缩 6其他 -->
							<img class="imgbox1" v-if='item.fileType==0' src="../assets/gaoji/wenjianjia.png" alt />
							<div  v-if='item.fileType==1'>
								<img v-if='item.fileFormat=="doc"||item.fileFormat=="docx"' src="../assets/gaoji/doc.png" alt />
									<img v-if='item.fileFormat=="xls"||item.fileFormat=="xlsx"' src="../assets/gaoji/xls.png" alt />
									<img v-if='item.fileFormat=="wpd"||item.fileFormat=="ppt"||item.fileFormat=="pptx"' src="../assets/gaoji/ppt.png" alt />
									<img v-if='item.fileFormat=="pdf"' src="../assets/gaoji/pdf.png" alt />
									<img v-if='"doc docx xls xlsx wpd ppt pptx pdf".indexOf(item.fileFormat)==-1' src="../assets/gaoji/qita.png" alt />
							</div>
							<img v-if='item.fileType==2' src="../assets/gaoji/tu.png" alt />
							<img v-if='item.fileType==3' src="../assets/gaoji/video.png" alt />
							<img v-if='item.fileType==4' src="../assets/gaoji/yinpin.png" alt />
							<img v-if='item.fileType==5' src="../assets/gaoji/yasuobao.png" alt />
							<img v-if='item.fileType==6' src="../assets/gaoji/qita.png" alt />
              <div class="gaojixia-left-item-wenben">
                <p class="gaojixia-left-item-wenben1">{{item.fileName}}</p>
                <p class="gaojixia-left-item-wenben2">最后更新于{{item.riqi}} {{item.time}}</p>
              </div>
            </div>
          </div>
          <div class="gaojixia-left" v-show="gaojiyou == false" >
            <div class="zanwukuang">
              <img src="../assets/zanwukuang.png" alt="">
              <div style="cursor: pointer;">没有找到符合条件的结果</div>
            </div>
          </div>
          <div class="gaojixia-right">
            <div class="gaojixia-right-box">
              <div class="gaojixia-right-box-tit">时间</div>
              <el-radio-group v-model="radio">
                <el-radio :label="0">全部</el-radio>
                <el-radio :label="1">今天</el-radio>
                <el-radio :label="2">最近3天</el-radio>
                <el-radio :label="3">最近一周</el-radio>
                <el-radio :label="4">最近一个月</el-radio>
              </el-radio-group>
            </div>
            <div class="gaojixia-right-box">
              <div class="gaojixia-right-box-tit">类型</div>
              <el-radio-group v-model="radio1">
                <el-radio :label="0">全部</el-radio>
                <el-radio :label="1">文档</el-radio>
                <el-radio :label="2">图片</el-radio>
                <el-radio :label="3">其他文件</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 确认彻底删除弹窗 -->
    <div class="querenshanchu" v-if="querenshanchu==true">
      <div class="box">
        <img class="cha" @click="gaojicha(3)" src="../assets/cha.png" alt />

        <div class="tishi"  style="font-size: 20px;color: #333333;">提示</div>

        <div v-if="panduan==1" class="tishiyu">文件清空后将无法恢复，确认清空吗？</div>

        <div v-if="panduan==3" class="tishiyu">文件彻底删除后将无法恢复，确认删除吗？</div>
        <div v-if="panduan==4" class="tishiyu">文件彻底删除后将无法恢复，确认删除吗？</div>

        <div v-if="panduan==2" class="tishiyu">删除后文件将进入回收站，30天后文件自动彻底删除</div>

        <div v-if="panduan==5" class="tishiyu">删除后文件将进入回收站，30天后文件自动彻底删除</div>
        
        <div class="buttombox">
          <div class="btn1" @click="gaojicha(3)">取消</div>
          <div class="shanchubtn2" @click="del">确认</div>
        </div>
      </div>
    </div>

   

    <!-- 重命名 -->
    <div class="querenshanchu" v-show="chongmingming==true">
      <div class="box">
        <img class="cha" @click="gaojicha(4)" src="../assets/cha.png" alt />

        <div class="tishi chongmingmingtishi">名称</div>
        <div class="inputboxcmm">
          <input type="text" ref="getFocus" @focus="focus($event)"   v-model="cmminputv"/>
          
        </div>
        <div class="buttombox">
          <div class="btn1 shoushou" @click="gaojicha(4)">取消</div>
          <div class="btn2 shoushou hei" v-if="ip=='tree'" @click="changyongajax(caozuoindex,'chongmingming')">确认</div>
          <div class="btn2 shoushou hei" v-if="ip=='falsetree'" @click="changyongajax(caozuoindex,'chongmingming','falsetree')">确认</div>
        </div>
      </div>
    </div>

    <!-- 分享 -->
    <div class="querenshanchu" v-show="fenxiangtc==true">
      <div class="box" style="height:418px;width:476px;">
        <img class="cha" @click="gaojicha(5)" src="../assets/cha.png" alt />

        <div class="tishi fenxiangtishi">分享</div>
        <div class="xianfx"></div>
        <div class="disflex">
          <div class="inputboxcmm">
            <input id='fuzhi' type="text" :value="fenxiangdata.url" style="font-weight:400" />
          </div>
          <div class="fuzhi shoushou" @click="copy()">复制</div>
        </div>
        <div class="xianfx"></div>
        <div class="codeimgbox">
          <img :src="fenxiangdata.quCode" alt />
          <div>扫码分享查看</div>
        </div>
      </div>
    </div>

    <!-- 上传弹窗 -->
    <div class="shangchuantc" v-show="shangchuantc==true&&upjindu.length>0">
      <div class="itemhead">
        <div class="displayflex">

          <img v-if='upzhuangtai==1' style="margin-right:15px;" src="../assets/cheng.png" alt />
          <img v-if='upzhuangtai==0'  style="margin-right:15px;" src="../assets/zhong.png" alt />
          <img v-if='upzhuangtai==2'  style="margin-right:15px;" src="../assets/shi.png" alt />
          <!-- <img style="margin-right:15px;" src="../assets/upshibai.png" alt /> -->

          <div v-if='upzhuangtai==1' class="zhuangtai">上传成功</div>
          <div v-if='upzhuangtai==0' class="zhuangtai">上传中...</div>
          <div v-if='upzhuangtai==2' class="zhuangtai">上传失败</div>

        </div>
        <div class="displayflex">
          <div  class="caozuo" >继续上传
            <input
              style="opacity: 0;height:100%;"
              type="file"
              class="upload"
              limit="5"
              @change="jixushangchuan"
              multiple
              ref="inputer2"
              title=""
            />
          </div>
          <img @click="gaojicha(6)" class="shoushou" style="width:12px;height:12px; margin-left:15px;" src="../assets/cha.png" alt />
        </div>
      </div>
      <div style="width:100%;height:50px;">
        
      </div>
      <div style=" max-height:420px;padding:10px 0; overflow: hidden;overflow-y: scroll;">
        <div class="item" v-for='(item,index) in upjindu' :key=index>

          <!-- <img v-if='item.uptype==1' src="../assets/upwjicon.png" alt /> -->
          <div v-if='item.uptype==1'>
              <div  v-if='item.fileType==1'>
              <img  v-if='item.fileFormat=="doc"||item.fileFormat=="docx"' src="../assets/list/doc.png" alt />
                <img  v-if='item.fileFormat=="xls"||item.fileFormat=="xlsx"' src="../assets/list/xls.png" alt />
                <img  v-if='item.fileFormat=="wpd"||item.fileFormat=="ppt"||item.fileFormat=="pptx"' src="../assets/list/ppt.png" alt />
                <img  v-if='item.fileFormat=="pdf"' src="../assets/list/pdf.png" alt />
                <img  v-if='"doc docx xls xlsx wpd ppt pptx pdf".indexOf(item.fileFormat)==-1' src="../assets/list/qita.png" alt />
            </div>
            <img  v-if='item.fileType==2' src="../assets/list/tu.png" alt />
            <img  v-if='item.fileType==3' src="../assets/list/video.png" alt />
            <img  v-if='item.fileType==4' src="../assets/list/yinpin.png" alt />
            <img  v-if='item.fileType==5' src="../assets/list/yasuobao.png" alt />
            <img  v-if='item.fileType==6' src="../assets/list/qita.png" alt />
          </div>


          <img  v-if='item.uptype==0' src="../assets/upwjjicon.png" alt />

          <div class="zhongjian">
            <div class="name">{{item.name}}</div>
            <div class="jindutiao">
              <div v-if='item.status=="ok"' class="lanse" :style="'width:'+ item.uploadPercentage +'%'"></div>
              <div v-if='item.status==true' class="lanse" :style="'width:'+ item.uploadPercentage +'%'"></div>
              <div v-if='item.status==false' class="hongse" :style="'width:'+ item.uploadPercentage +'%'"></div>
            </div>
          </div>
          <img v-if='item.status==true' style="width:20px;height:20px;" src="../assets/landui.png" alt />

          <img  v-if='item.status=="ok"&&item.uploadPercentage<100' style='width:20px;height:20px;' @click='quxiaoshangchuan(index)'  src="../assets/quxiaoup.png" alt />

          
          <!-- <div v-if='item.status=="ok"&&item.uploadPercentage==100' style='width:16px;height:16px;'>加载中</div> -->
          <img  v-if='item.status=="ok"&&item.uploadPercentage==100'  src="../assets/shalou@2x.png" alt="">

          <!-- <img @click='quxiaoshangchuan(index)' v-if='item.status=="ok1"' style='width:16px;height:16px;' src="../assets/cha.png" alt /> -->

          <img v-if='item.status==false' src="../assets/upchenggong.png" @click="chongxinup(index)" alt />
        </div>
      </div>
      
    </div>

    <!-- 移动到框 -->
    <div class="querenshanchu" v-show="yidongtc==true">
      <div class="yidongdao">
        <img @click="gaojicha(7)" class="yidongdao-cha" src="../assets/cha.png" alt />
        <div class="yidongdao-top">

          <div v-if='caozuostatus=="yidong"' class="yidongdao-top-tit">将“{{treeclicklist[caozuoindex].fileName}}”移动到</div>
          <div v-if='caozuostatus=="fuzhi"' class="yidongdao-top-tit">将“{{treeclicklist[caozuoindex].fileName}}”复制到</div>
          <div v-if='caozuostatus=="cyyidong"' class="yidongdao-top-tit">将“{{changyonglist[caozuoindex].fileName}}”移动到</div>
          <div v-if='caozuostatus=="cyfuzhi"' class="yidongdao-top-tit">将“{{changyonglist[caozuoindex].fileName}}”复制到</div>

          <div v-if='caozuostatus=="plyidongdao"' class="yidongdao-top-tit">将“{{namelist[0]}}”等移动到</div>
          <div></div>

          <div class="yidongdao-top-search">
            <img class="yidongdao-top-search-sousuotu" src="../assets/search.png" alt />
            <input type="text" placeholder="搜索标题/文件"  v-model="yd_searchzi"/>
          </div>
          <div class="yidongdao-top-daohang">
            <div v-show="showsearchzw">
              暂无搜索内容
            </div>
            <el-tree
              :data="data6"
              node-key="id"
              :default-expand-all="true"
              :highlight-current="true"
              
              @node-click="xuanzhongydz"
              v-show="showtree"

              ref="tree1"
            >
              <span class="custom-tree-node" slot-scope="{node,data}">
                <div class="df">
                  <img
                    v-if="data.style==0"
                    style="width:16px;height:16px;margin-right:8px;"
                    src="../assets/yidongwodewenjianjia.png"
                    alt
                  />
                  <img
                    v-if="data.style==1"
                    style="width:20px;height:18px;margin-right:8px;"
                    src="../assets/xinjianwenjianjia.png"
                    alt
                  />
                  <span v-show="data.xin==false">{{ data.name }}</span>

                  <input
                    class="xinjian"
                    v-model="data.name"
                    v-show="data.xin==true"
                    ref="gain"
                    autofocus="autofocus"
                    @focus="focus($event)"
                    type="text"
                    value="data.label"
                    @blur="shuqujiaodian(data.name)"
                  />
                </div>
              </span>
            </el-tree>

            <div v-show="showitem" class="itemxx shoushou" @click="totree(item.id)" v-for="(item,index) in yd_searchlist" :key="index">
               <img
                   
                    style="width:20px;height:18px;margin-right:8px;"
                    src="../assets/xinjianwenjianjia.png"
                    alt
                  />
                <span style="margin-left:10px;">{{ item.fileName }}</span>

            </div>
            


          </div>
        </div>
        <div class="yidongdao-bottom">
          <div class="yidongdao-bottom-left  shoushou" @click="ydxinjian">新建文件夹</div>
          <div class="yidongdao-bottom-right">
            <div class="yidongdao-bottom-right-quxiao shoushou" @click="gaojicha(7)">取消</div>
            <div  v-if='caozuostatus=="yidong"' class="yidongdao-bottom-right-tianjia shoushou" @click="yd_fzdao('yidong')">确定</div>

            <div  v-if='caozuostatus=="fuzhi"' class="yidongdao-bottom-right-tianjia shoushou" @click="yd_fzdao('fuzhi')">确定</div>

            <div  v-if='caozuostatus=="plyidongdao"' class="yidongdao-bottom-right-tianjia shoushou" @click="yd_fzdao('plyidongdao',plidlist,namelist)">确定</div>

            <div  v-if='caozuostatus=="cyyidong"' class="yidongdao-bottom-right-tianjia shoushou" @click="cyyd_fzdao('cyyidong')">确定</div>
            <div  v-if='caozuostatus=="cyfuzhi"' class="yidongdao-bottom-right-tianjia shoushou" @click="cyyd_fzdao('cyfuzhi')">确定</div>
          </div>
        </div>
      </div>
    </div>

      <!-- 新建文件夹名字 -->
    <div class="querenshanchu" v-show="tcxinfileName==true">
      <div class="box">
        <img class="cha" @click="gaojicha(8)" src="../assets/cha.png" alt />

        <div class="tishi" style="font-size: 20px;color: #333333;">名称</div>
        <div class="inputboxcmm">
          <input v-model="xinfileName" ref='cao' @focus="focus($event)" type="text" />
        </div>
        <div class="buttombox">
          <div class="btn1 shoushou" @click="gaojicha(8)">取消</div>
          <!-- <div >确认</div> -->
          <!-- <el-button class="btn2" @click="addwjj" :duration='1500' :plain="true">确认</el-button> -->
          <div class="btn2 shoushou hei" v-if='xinfileName.length>0'  @click="addwjj">确认</div>

          <div class="btn2 shoushou " v-if='xinfileName.length<=0'  >确认</div>
        </div>
      </div>

      
    </div>

    
    

    <!-- <wxlogin :appid="appid" :scope="scope" :redirect_uri="redirect_uri"></wxlogin> -->
  </div>
</template>

<script>
import wxlogin from 'vue-wxlogin';
export default {
  name: "HelloWorld",
  components: {wxlogin},
  data() {
    return {

      otherinput:true,
      loading:false,
      data5: [],
      data6: [],

      
      //选中文件夹
      selectdata: "",
      //新建文件夹名字
      xinname: "新建文件夹",

      restaurants: [],
      state: "",
      timeout: null,
      // input获取焦点后操作
      searchshow: false,
      searchdezhi:'',
      yd_searchzi:"",
      searchxialalist:[],
      // 高级搜索框
      gaojibuttonyanse: 0,
      radio: 0,
			radio1: 0,
			sousuozhi:'',
			gaojiyou:true,
			gaojilist:[],
      // 头像设置框
      shezhishow: false,

      // 主页框  添加文件夹
      zhuyeshow: false,
      // 常用
      changyonglist:[],
      changyongbox:false,
      // progressFlag: false,
      tranLeft: 0, // 向左偏移
      tranTop: 0,  // 向右偏移
      tranLefts: 0, // 向左偏移
      tranTops: 0,  // 向右偏移
      ip:'tree',   // 判断是常用  还是  最近
      // 1是大图模式 2是列表模式
      moshi: 1,
      istcpx: false,

      //搜索 主页 最近 回收站
      showsousuo: true,
      showzhuyechangyong: true,
      showwodewenjian: true,
     
      showhuishouzhan: false,
      showgenlist:true,
 
      // 弹窗 1修改头像弹框 2高级搜索框 3代表确认删除弹窗  4 chongmingming 5 分享弹窗 6上传弹窗 7移动到弹窗 8新建文件夹名

      gaishow: false,
      gaojisousuotc: false,
      querenshanchu: false,
      chongmingming: false,
      fenxiangtc: false,
      shangchuantc: false,
      yidongtc: false,
      tcxinfileName:false,

  
      //暂无
      zanwu: false,

      // 1 qingkong   2 chedishanchu 3 shanchu

      panduan: 0,

      //列表筛选
      shaixuan11: false,

      // 当前操作的index
      caozuoindex:-1,
      timer:'',

      // 显示全部盒子
      showallbox:false,
      //全选
      selectall:false,
      changyongall:false,
      highlight:true,
      // 1快速开始 2树 3回收站
      selectqian:1,

      //新建文件名
      xinfileName:'新建文件夹',

      // selectqian==2 数据 // selectqian==1 数据
      treeclicklist:'',
      

      baseurl:'http://39.101.178.10:8080/apex-boundless' ,

      // 重命名输入
      cmminputv:"",
      houzhui:'',

      // 移动至data或者新建文件夹data
      selectydzdata:'',

      caozuostatus:'',
      children:"",

      mianbaoxie:[],

      upjindu:[],
      // 批量操作id 存储
      plidlist:'',
      namelist:'',

      upzhuangtai:3,

      filess:"",

      jindutimer:"",

      step:1,
      showcanvas:false,

      listsxstyle:0,
      listsxtime:0,
      listpaixu:0,

      fenxiangdata:'',

      tempurl:"",

      pcUserInfodata:"",
      userInfo:"",

      yd_searchlist:'',
      showsearchzw:false,
      showtree:true,
      showitem:false,

      screenWidth:'',

      // 移入下载展示
      // xiazaizhanshikuang:false


       filemap: [
      { "txt": 1 },
      { "doc": 1 },
      { "docx": 1 },
      { "xls": 1 },
      { "xlsx": 1 },
      { "ppt": 1 },
      { "pptx": 1 },
      { "pdf": 1 },
      { "bmp": 2 },
      { "jpg": 2 },
      { "jpeg": 2 },
      { "png": 2 },
      { "tiff": 2 },
      { "gif": 2 },
      { "pcx": 2 },
      { "tga": 2 },
      { "exif": 2 },
      { "fpx": 2 },
      { "svg": 2 },
      { "psd": 2 },
      { "cdr": 2 },
      { "pcd": 2 },
      { "dxf": 2 },
      { "ufo": 2 },
      { "eps": 2 },
      { "ai": 2 },
      { "raw": 3 },
      { "wmf": 3 },
      { "mp4": 3 },
      { "avi": 3 },
      { "mov": 3 },
      { "wmv": 3 },
      { "navi": 3 },
      { "3gp": 3 },
      { "mkv": 3 },
      { "f4v": 3 },
      { "rmvb": 3 },
      { "webm": 3 },
      { "mp3": 4 },
      { "wma": 4 },
      { "wav": 4 },
      { "mod": 4 },
      { "ra": 4 },
      { "cd": 4 },
      { "md": 4 },
      { "asf": 4 },
      { "aac": 4 },
      { "ape": 4 },
      { "mid": 4 },
      { "ogg": 4 },
      { "m4a": 4 },
      { "vqf": 4 },
      { "rar": 5 },
      { "tar": 5 },
      { "zip": 5 },
      { "gzip": 5 },
      { "cab": 5 },
      { "uue": 5 },
      { "abj": 5 },
      { "bz2": 5 },
      { "lzh": 5 },
      { "jar": 5 },
      { "ace": 5 },
      { "iso": 5 },
      { "7-zip": 5 },
      { "z": 5 },
      { "htm": 5 },
      { "html": 5 },
      { "jsp": 5 },
    ],

    listnum:'',
    cylistnum:""
    };
  },
  


  methods: {
    // focus:function(event){
    //   event.currentTarget.select();
    // },
    // 常用list

   

    tothismbx(node){
      this.getroot()
      sessionStorage.setItem('currentid',node.data.id)
      this.$refs.tree.setCurrentKey(node.data.id)

      
      this.mianbaoxie=[]
      this.diguimbx(node)
      this.selectqian=2
      this.listpaixu=1
      this.highlight=true
      this.selectdata = node.data;

      //显示模块
      this.showzhuyechangyong = false;
      this.showzuijin = false;
      this.showhuishouzhan = false;
      this.showwodewenjian = true;
      
      this.getselectlistdata()
    },
    getchangyonglist(){
      this.$axios({
          method:'post',
          url:'/file/queryCommonly',
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;',
            "Authorization1":'Bearer ' + sessionStorage.getItem("token")
          },
          data:{ 
            // userId:2,
            page:1,
            size:100,
            // token:this.token,
          }
      }).then((response) =>{          //这里使用了ES6的语法
        if(response.data.msg=='SUCCESS'){
          var changyonglist = response.data.data.list
          changyonglist.forEach(element => {
            element.riqi= element.updateTime.substr(5,5).replace("-","月");
            element.time= element.updateTime.substr(11,5);
                element.checked=false
                element.showtc=false

                 if(element.fileType==0){

                  element.fileFormat = element.fileName
                  element.firstname=element.fileName
                }else{

                  let fileName = element.fileName.lastIndexOf(".");//取到文件名开始到最后一个点的长度
                  let fileNameLength = element.fileName.length;//取到文件名长度
                  let fileFormat = element.fileName.substring(fileName + 1, fileNameLength);//截
                  let firstname = element.fileName.substring(0,fileName);//截
                  element.fileFormat = fileFormat
                  element.firstname=firstname
                }
                
              });
          
          this.changyonglist = changyonglist
        }
      }).catch((error) =>{
          console.log(error)       //请求失败返回的数据
      })
    },
    tiaozhuanjinqu(e,index,style){
      console.log(index,style,'000')
      if(e.target.className=='chang3-right' || e.target.className=='chang3tu'){
        console.log(e.pageX)
          // this.tranLeft = (e.pageX - 160) + 'px'
          // this.tranTop = (e.pageY + 10) + 'px'
          this.tranLeft = (e.pageX - 160) + 'px'
          this.tranTop = (e.pageY + 14) + 'px'
          if (this.changyonglist[index].showtc == false) {
            this.changyonglist.forEach(element => {
              element.showtc = false;
            });
            this.changyonglist[index].showtc = true;
          } else {
            this.changyonglist[index].showtc = false;
          }

      }else if(e.target.className=='chang3-left' || e.target.className=='c3-l-l' || 
      e.target.className=='c3-l-r' || e.target.className=='c3-l-r-p1' || e.target.className=='c3-l-r-p2' || e.target.className=='imgbox1'){
        if(style==0){
          // 进文件夹
          console.log("进文件夹")
          this.settreeselect(this.changyonglist[index].id)

          this.selectqian=2
          this.listpaixu=1
          this.highlight=true
          //显示模块
          this.showzhuyechangyong = false;
          this.showzuijin = false;
          this.showhuishouzhan = false;
          this.showwodewenjian = true;
         
          this.getselectlistdata()

        }else{
          // 进详情页
          console.log("进详情页")
          console.log(style,'style')
          this.$router.push({path: '/details',query: {fileObject: this.changyonglist[index]}})
        }
      }else if(e.target.className=='changyong'){
          console.log("changyong")
          this.swcy(index)
      }
      else if(e.target.className=='xingbiao'){
          console.log("xingbiao")
          this.swxb(index)
      }
      else if(e.target.className=='fenxiang'){
          console.log("fenxiang")
          this.caozuoindex=index

          this.getfenxiang([this.changyonglist[index].id,])

          this.fenxiangtc=true

      }
      else if(e.target.className=='yidong'){
          console.log("yidong")
          this.caozuoindex=index
          this.yidongtc=true
          this.caozuostatus='cyyidong'
          this.changyonglist[index].showtc = false
      }
      else if(e.target.className=='fuzhidao'){
          console.log("yidong")
          this.caozuoindex=index
          this.yidongtc=true
          this.caozuostatus='cyfuzhi'
          this.changyonglist[index].showtc = false
      }
      else if(e.target.className=='xiazai'){
        console.log("xiazai")
        return
        
      }

      else if(e.target.className=='dabaoxiazai'){
        console.log("dabaoxiazai")
        // window.location.href = this.baseurl + "/file/batchDownloadFile/"+[this.changyonglist[index].id,]
        this.dabaoxiazai('changyong',index)
      }
      else if(e.target.className=='yuanshi'){
        console.log("yuanshi")
        this.xiazai('changyong','yuan',index)
        

      }
      else if(e.target.className=='pdfdown'){
        console.log("pdfdown")
       this.xiazai('changyong','pdf',index)
      }

      else if(e.target.className=='chongmingming'){
          console.log("chongmingming")
          this.caozuoindex=index
          this.chongmingming=true
          this.$nextTick(() => { // 2. 弹框显示DOM更新完成后 获取refs.ref1 设置焦点
            console.log(this.$refs.getFocus)
            this.$refs.getFocus.focus() // 设置焦点
          })
          this.ip="falsetree"
          if(this.changyonglist[index].fileType == 0){
            this.cmminputv=this.changyonglist[index].firstname
            this.houzhui=''
          }else{
            this.cmminputv=this.changyonglist[index].firstname
            this.houzhui=this.changyonglist[index].fileFormat
          }
          
          this.changyonglist[index].showtc = false
      }
      else if(e.target.className=='shanchu'){
          console.log("shanchu")
          this.panduan=2
          this.querenshanchu=true
          this.ip="falsetree"
          this.caozuoindex=index
          this.changyonglist[index].showtc = false
          
      }
    },

    //下载
    xiazai(str,type,index){
      var that=this
      var id,fileName,firstname

      if(str=='changyong'){
        id=that.changyonglist[index].id
        fileName=that.changyonglist[index].fileName
        firstname=that.changyonglist[index].firstname
      }else{
        id=that.treeclicklist[index].id
        fileName=that.treeclicklist[index].fileName
        firstname=that.treeclicklist[index].firstname
      }
      if(type=='yuan'){
        that.$axios({
          method:'get',
          url:'/file/downloadFile/'+id,
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          responseType:'blob',
        }).then((data) =>{   
          console.log(data)
          if (!data) {
              return
          }
          console.log('下载')
          // debugger
          let url = window.URL.createObjectURL(data.data)
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download',fileName)
          document.body.appendChild(link)

          link.click()

        }).catch((error) =>{
          console.log(error)  
        })
      }else{
        that.$axios({
          method:'get',
          url:'/file/downloadFilePDF/'+id,
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          responseType:'blob',
        }).then((data) =>{   
          console.log(data)
          if (!data) {
              return
          }
          // debugger
          let url = window.URL.createObjectURL(data.data)
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download',firstname+'.pdf')
          document.body.appendChild(link)

          link.click()
          

        }).catch((error) =>{
          console.log(error)  
        })
      }
    },

    //打包下载
    dabaoxiazai(str,index){
      var that=this
      var id,fileName

      if(str=='changyong'){
        id=that.changyonglist[index].id
        fileName=that.changyonglist[index].fileName
      }else{
        id=that.treeclicklist[index].id
        fileName=that.treeclicklist[index].fileName
      }

       that.loading=true
      that.$axios({
          method:'get',
          url:'/file/batchDownloadFile/'+id,
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          responseType:'blob',
        }).then((data) =>{   
          console.log(data)
          if (!data) {
              return
          }
          // debugger
           that.loading=false
          let url = window.URL.createObjectURL(data.data)
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download',fileName+'.zip')
          document.body.appendChild(link)

          link.click()
          

        }).catch((error) =>{
          console.log(error)  
        })
    },

    //获取分享url
    getfenxiang(id){
       this.$axios({
        method:'post',
        url:'/share',
        headers: {
          'Accept':'application/json;',
          'Content-Type': 'application/json;'
        },
        data:{ 
          id:id,
          page:'pages/shouxia/shouxia'
        }
      }).then((response) =>{   
        console.log(response)
        response.data.data.quCode='data:image/png;base64,'+response.data.data.quCode
        this.fenxiangdata=response.data.data

      }).catch((error) =>{
        console.log(error)  
      })
    },


    // 常用中设为常用
    swcy(index){
      var id = this.changyonglist[index].id
      this.$axios({
        method:'post',
        url:'/file/setUp',
        headers: {
          'Accept':'application/json;',
          'Content-Type': 'application/json;'
        },
        data:{ 
          id:id,
          isCommonly:0   // 1为常用 0为非常用
        }
      }).then((response) =>{   
        if(response.data.status == 200){
          console.log('设为常用成功')

          this.getchangyonglist()
          this.changyonglist.forEach(element => {
            element.showtc = false;
          });
        }

      }).catch((error) =>{
        console.log(error)  
      })
    },
    // 常用中设为星标
    swxb(index){
      this.classtrue = false
      var id = this.changyonglist[index].id
      var isxingbiao = this.changyonglist[index].isFollow
      if(isxingbiao == 0){
        isxingbiao = 1
      }else{
        isxingbiao = 0
      }
      console.log(isxingbiao,'isxingbiao')
      this.$axios({
        method:'post',
        url:'/file/setUp',
        headers: {
          'Accept':'application/json;',
          'Content-Type': 'application/json;'
        },
        data:{ 
          id:id,
          isFollow:isxingbiao   // 1为星标 0为非星标
        }
      }).then((response) =>{   
        if(response.data.status == 200){
          console.log('设为星标成功')
          this.changyonglist.forEach(element => {
            element.showtc = false;
          });
          this.getchangyonglist()
          this.getselectlistdata()
        }

      }).catch((error) =>{
        console.log(error)  
      })
    },
    // 常用复制到移动到
    cyyd_fzdao(str){
      var requestdata={}
      requestdata.fileName=[this.changyonglist[this.caozuoindex].fileName]
      requestdata.id=[this.changyonglist[this.caozuoindex].id]
      requestdata.parentId=this.selectydzdata==''?this.data5[0].id:this.selectydzdata.id
      if(str=='cyyidong'){
        requestdata.status=2
      }
      if(str=='cyfuzhi'){
        requestdata.status=1
      }

      this.$axios({
          method:'post',
          url:'/file/cutOrCopy',
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          // id 为当前文件的id
            // filename为当前文件的文件名
            // parentId为要移动或复制的文件夹的id 根目录为0
            // status 参数:1为复制 2为移动
          data:requestdata
      }).then((response) =>{          //这里使用了ES6的语法
              //请求成功返回的数据
          if(response.data.msg='SUCCESS'){
            console.log(response)

            this.gaojicha(7)

          }
      }).catch((error) =>{
          console.log(error)       //请求失败返回的数据
      })
    },
    xinjian_wjj(){
      this.zhuyeshow=false
      this.tcxinfileName=true
      this.$nextTick(() => { // 2. 弹框显示DOM更新完成后 获取refs.ref1 设置焦点
        // console.log(this.$refs.getFocus)
        this.$refs.cao.focus() // 设置焦点
      })
    },
    addwjj(){
      var that=this
      var parentId,xinfileName
      if(this.yidongtc==true){
        console.log(4567894564123)
        parentId=this.children[0].parentId;
        xinfileName=this.children[0].name
      
      }else{
        console.log('000000000000000')
        console.log(this.data5.id,'that.data5.id')
        console.log(this.selectdata.id,'that.selectdata.id')
        if(that.xinfileName==''){
          that.$message.error('文件夹名称不能为空');
          return
        }
        if(that.selectdata==''){
          parentId=0
        }else{
          parentId=this.selectdata.id
        }
        xinfileName=that.xinfileName
      }
      console.log(parentId,'parentId')
      that.$axios({
          method:'post',
          url:'/file/createFolder',
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          data:{    //这里是发送给后台的数据
                // userId:2,
                parentId:parentId,
                fileName:xinfileName
                // token:this.token,
          }
      }).then((response) =>{          //这里使用了ES6的语法
          // console.log(response)       //请求成功返回的数据
          if(response.data.msg=='SUCCESS'){
             that.$message({
                showClose: true,
                message: '新建成功',
                type: 'success'
             });

            that.tcxinfileName=false
            console.log(response,"zhongyao")

            sessionStorage.setItem('currentid',response.data.data.id);
            that.getroot()

            // that.sz_wjjxz(res.data.id)
            

          }else{
            that.$message.error(response.data.msg);
          }
          
      }).catch((error) =>{
          console.log(error)       //请求失败返回的数据
      })
    },

    // 获取根目录
    getroot(){
      console.log(111)
      this.$axios({
          method:'get',
          url:'/mySpace/queryDirectory',
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          data:{    //这里是发送给后台的数据
                // userId:2,
                // token:this.token,
          }
      }).then((response) =>{          //这里使用了ES6的语法
          // console.log(response)       //请求成功返回的数据
         
          var ccc=[
            {   
              id: 0,
              name: "我的文件",
              type: 0,
              children:[]
            }
          ]

          ccc[0].children=response.data.data

          var data5=ccc
          // data5.push(response.data.data[0])
          
          this.diguiadd(data5[0])

          data5[0].style=0


          this.data5=data5

          this.data6=data5
          this.$forceUpdate();


          if(sessionStorage.getItem('currentid')){
            if(sessionStorage.getItem('currentid')=='huishou'){
              this.huishouzhan()
            }else if(sessionStorage.getItem('currentid')=='kuaisu'){
              this.kuaisukaishi()
            }else{
               this.sz_wjjxz(sessionStorage.getItem('currentid'))
            }
          }else{
            this.getselectlistdata()
          }


      }).catch((error) =>{
          console.log(error,'ssssssssssssssss')       //请求失败返回的数据
      })
    },
    // 递归遍历
    diguiadd(data){
      // console.log(data)
      data.xin=false
      data.style=1
      // data.checked=true
      // data.showtc=false
      // data.iconstyle=0


      //  { checked: true, showtc: false, style: 0 },
      // console.log(data)
      // console.log(data.children)
      if(!data.children){
        data.children=[]
      }else{
        if(data.children.length!=0){
          data.children.forEach(element => {
            this.diguiadd(element)
          });
        }
      }
      
        // return nodes;
    },

    focus(event) {
     event.currentTarget.select();
    },

    ydxinjian() {
      this.children = [
        {
          id: '',
          name: this.xinname,
          style: 1,
          xin: true,
          type:0,
          children: []
        }
      ];
      if (this.selectydzdata == "") {
        this.children[0].parentId=this.data6[0].id
        this.data6[0].children.push(this.children[0]);

      } else if (this.selectydzdata.children.length != 0) {
        this.children[0].parentId=this.selectydzdata.id

        var children1 = this.selectydzdata.children;
        children1.push(this.children[0]);
        this.$set(this.selectydzdata, "children", children1);

        
        // this.selectydzdata.children.push(children[0])
      } else if (this.selectydzdata.children.length == 0) {
        this.children[0].parentId=this.selectydzdata.id
        this.selectydzdata.children = this.children;
      }

      this.$forceUpdate();

      this.$nextTick(function() {
        if (this.timer) {
           clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {// 100毫秒延迟解决输入框不自动获取焦点的bug
           this.$refs.gain.focus();// 等价  focus();
            
        }, 100);
      });
    },

      // 获取选中 文件夹下文件
    getselectlistdata(){
      // POST /mySpace/queryMyFile
      
      if(this.selectqian==2){
        this.$axios({
          method:'post',
          url:'/mySpace/queryMyFile',
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          data:{    //这里是发送给后台的数据
                // userId:2,
                parentId:this.selectdata.id,
                page :1,
                size :100,
                fileType:this.listsxstyle,
                timeSlot :this.listsxtime,
                orderType :this.listpaixu,
                // token:this.token,
          }
        }).then((response) =>{          //这里使用了ES6的语法
                //请求成功返回的数据
            if(response.data.msg='SUCCESS'){
            //  console.log(response.data.data.list)

              var treeclicklist=response.data.data.list
              treeclicklist.forEach(element => {
                element.checked=false
                element.showtc=false
                
                element.xiazaizhanshi=false
                if(element.fileType==0){

                  element.fileFormat = element.fileName
                  element.firstname=element.fileName
                }else{

                  let fileName = element.fileName.lastIndexOf(".");//取到文件名开始到最后一个点的长度
                  let fileNameLength = element.fileName.length;//取到文件名长度
                  let fileFormat = element.fileName.substring(fileName + 1, fileNameLength);//截
                  let firstname = element.fileName.substring(0,fileName);//截
                  element.fileFormat = fileFormat
                  element.firstname=firstname
                }
                
              });
              console.log(treeclicklist)
              this.treeclicklist=treeclicklist
              this.quxiaoquanxuan()
            }
        }).catch((error) =>{
            console.log(error)       //请求失败返回的数据
        })
      }else if(this.selectqian==1){
        this.$axios({
          method:'post',
          url:'/file/queryLately',
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          data:{    //这里是发送给后台的数据
                // userId:2,
                page :1,
                size :100,
                fileType:this.listsxstyle,
                timeSlot :this.listsxtime,
                orderType :this.listpaixu,
                // token:this.token,
          }
        }).then((response) =>{          //这里使用了ES6的语法
                //请求成功返回的数据
            if(response.data.msg='SUCCESS'){
            //  console.log(response.data.data.list)

              var treeclicklist=response.data.data.list
              treeclicklist.forEach(element => {
                element.checked=false
                element.showtc=false

                 if(element.fileType==0){

                  element.fileFormat = element.fileName
                  element.firstname=element.fileName
                }else{

                  let fileName = element.fileName.lastIndexOf(".");//取到文件名开始到最后一个点的长度
                  let fileNameLength = element.fileName.length;//取到文件名长度
                  let fileFormat = element.fileName.substring(fileName + 1, fileNameLength);//截
                  let firstname = element.fileName.substring(0,fileName);//截
                  element.fileFormat = fileFormat
                  element.firstname=firstname
                }
                
              });
              console.log(treeclicklist)
              this.treeclicklist=treeclicklist
              this.searchxialalist=this.treeclicklist
              this.quxiaoquanxuan()
            }
        }).catch((error) =>{
            console.log(error)       //请求失败返回的数据
        })
      }else if(this.selectqian==3){
        this.$axios({
            method:'post',
            url:'/dustbin/queryDustbin',
            headers: {
              'Accept':'application/json;',
              'Content-Type': 'application/json;'
            },
            data:{    //这里是发送给后台的数据
                  // userId:2,
                  // parentId:0,
                  page :1,
                  size :100,
                  fileType:this.listsxstyle,
                  timeSlot :this.listsxtime,
                  orderType :this.listpaixu,
                  // token:this.token,
            }
          }).then((response) =>{          //这里使用了ES6的语法
                  //请求成功返回的数据
              console.log(response)
              if(response.data.msg='SUCCESS'){
                console.log(response.data.data)

                var treeclicklist=response.data.data
                treeclicklist.forEach(element => {
                  element.checked=false
                  element.showtc=false

                if(element.fileType==0){

                  element.fileFormat = element.fileName
                  element.firstname=element.fileName
                }else{

                  let fileName = element.fileName.lastIndexOf(".");//取到文件名开始到最后一个点的长度
                  let fileNameLength = element.fileName.length;//取到文件名长度
                  let fileFormat = element.fileName.substring(fileName + 1, fileNameLength);//截
                  let firstname = element.fileName.substring(0,fileName);//截
                  element.fileFormat = fileFormat
                  element.firstname=firstname
                }
                });
                console.log(treeclicklist)
                this.treeclicklist=treeclicklist
                this.quxiaoquanxuan()
              }
          }).catch((error) =>{
              console.log(error)       //请求失败返回的数据
          })
      }
      
    },

    //递归获取面包屑
    diguimbx(node){

      this.mianbaoxie.unshift(node)

      if(node.data.name==this.data5[0].name){
        return
      }else{
        this.diguimbx(node.parent)
      }
      
    },
    // 文件夹选中
    xuanzhongwjj(data,node) {
      // console.log(data);
      // console.log(node.data.name);
      this.getroot()

      sessionStorage.setItem('currentid',data.id);
      this.$refs.tree.setCurrentKey(data.id)

      // console.log(data.id)
      
      // console.log( this.$refs.tree)
      this.mianbaoxie=[]
      this.diguimbx(node)
      this.selectqian=2
      this.listpaixu=1
      this.highlight=true
      this.selectdata = data;

      //显示模块
      this.showzhuyechangyong = false;
      this.showzuijin = false;
      this.showhuishouzhan = false;
      this.showwodewenjian = true;
      

      this.getselectlistdata()
     
    },


     // 设置文件夹选中
    sz_wjjxz(id) {
      // console.log(data);
      // console.log(node.data.name);
       sessionStorage.setItem('currentid',id);

      var that=this
      this.$nextTick(function(){
        console.log(that.$refs.tree)
        console.log(id)
        that.$refs.tree.setCurrentKey(Number(id))
        var node
        node=that.$refs.tree.getNode(Number(id))
        console.log(node)
        that.mianbaoxie=[]
        that.diguimbx(node)
        that.selectqian=2
        this.listpaixu=1
        that.highlight=true

        console.log(node)

        that.selectdata = node.data;
        //显示模块
        that.showzhuyechangyong = false;
        that.showzuijin = false;
        that.showhuishouzhan = false;
        that.showwodewenjian = true;
        that.getselectlistdata()
      })
     

      
    },

    // 文件夹选中
    xuanzhongydz(data) {
 
      this.selectydzdata = data;

    },

    //失去焦点
    shuqujiaodian(name) {
      if(name==''){
        this.$message.error('文件夹名称不能为空');
        
        return
      }else{
        console.log("11111111111");
        // if (this.selectydzdata != "") {
        //   this.selectydzdata.xin = false;
        // } else if (this.selectydzdata == "") {
        //   this.data6[0].children[this.data6[0].children.length - 1].xin = false;
        // }
        this.children.xin=false
        this.addwjj()
        this.$forceUpdate();
      }
    },

    // // 导航选择
    // handleNodeClick(data) {
    //   console.log(data);
    //   if (data.label == "快速开始") {
    //     this.showzhuyechangyong = true;
    //     this.showzuijin = true;
    //     this.showhuishouzhan = false;
    //     this.showwodewenjian = false;
    //   }
    //   if (data.label == "我的文件") {
    //     this.showzhuyechangyong = false;
    //     this.showzuijin = true;
    //     this.showhuishouzhan = false;
    //     this.showwodewenjian = true;
    //   }
    // },

    // 回收站
    huishouzhan() {
      
      sessionStorage.setItem('currentid','huishou')
      this.showhuishouzhan = true;
      this.showzhuyechangyong = false;
      this.showzuijin = false;
      this.showwodewenjian = false;
      // 控制书不被选中
      this.highlight=false
      this.selectqian=3
      this.getselectlistdata()
    },
    // 快速开始
    kuaisukaishi() {
      
      sessionStorage.setItem('currentid','kuaisu')
      this.showhuishouzhan = false;
      this.showzhuyechangyong = true;
      this.showzuijin = true;
      this.showwodewenjian = true;
       // 控制书不被选中
      this.highlight=false
      this.selectqian=1
      this.listpaixu=0
      this.getselectlistdata()
      this.getchangyonglist()
    },
  

    // input获取焦点后操作
    searchkuang() {
      this.quxiaoquanxuan()
      this.searchshow = true;
      // this.searchxialalist=[];
      console.log(this.searchdezhi,'123456')
      
      if(this.searchdezhi != ""){
        this.searchxialalist=[];
        this.$axios({
          method:'post',
          url:'/file/search',
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          data:{ 
            fileName:this.searchdezhi,
            page:1,
            size:20,
          }
        }).then((response) =>{   
          if(response.data.status == 200){
            console.log('普通搜索成功')
            var data = response.data.data
            var searchxialalist = data.list
            // for(var a in this.searchxialalist){
            //   this.searchxialalist[a].riqi= this.searchxialalist[a].updateTime.substr(5,5).replace("-","月");
            //   this.searchxialalist[a].time= this.searchxialalist[a].updateTime.substr(11,5);
            // }
            searchxialalist.forEach(element => {
              element.riqi= element.updateTime.substr(5,5).replace("-","月");
              element.time= element.updateTime.substr(11,5);
              if(element.fileType==0){
                element.fileFormat = element.fileName
                element.firstname=element.fileName
              }else{
                let fileName = element.fileName.lastIndexOf(".");//取到文件名开始到最后一个点的长度
                let fileNameLength = element.fileName.length;//取到文件名长度
                let fileFormat = element.fileName.substring(fileName + 1, fileNameLength);//截
                let firstname = element.fileName.substring(0,fileName);//截
                element.fileFormat = fileFormat
                element.firstname=firstname
              }
            });
            this.searchxialalist = searchxialalist
          }
        }).catch((error) =>{
          console.log(error)  
        })
      }
      
    },
    // input失去焦点后操作
    quxiaojiaodian() {
      this.searchdezhi=''
      var that = this
      setTimeout(function() {
        that.searchshow = false;
      }, 200);
    },
    searchjinwenjianjia(e,index,style){
      if(style==0){
          // 进文件夹
          console.log("进文件夹")
          // console.log(data);
          // console.log(node.data.name);
          this.settreeselect(this.searchxialalist[index].id)

          this.selectqian=2
          this.listpaixu=1
          this.highlight=true
          //显示模块
          this.showzhuyechangyong = false;
          this.showzuijin = false;
          this.showhuishouzhan = false;
          this.showwodewenjian = true;
          this.showgenlist=true
          this.getselectlistdata()

        }else{
          // 进详情页
          console.log("进详情页")
          this.$router.push({path: '/details',query: {fileObject: this.searchxialalist[index]}})
        }
    },
    // 高级搜索框进文件或文件夹
    gaojisearchjinwenjianjia(e,index,style){
      if(style==0){
          // 进文件夹
          console.log("进文件夹")
          // console.log(data);
          // console.log(node.data.name);
          this.settreeselect(this.gaojilist[index].id)

          this.selectqian=2
          this.listpaixu=1
          this.highlight=true
          //显示模块
          this.showzhuyechangyong = false;
          this.showzuijin = false;
          this.showhuishouzhan = false;
          this.showwodewenjian = true;
          this.showgenlist=true
          this.getselectlistdata()

        }else{
          // 进详情页
          console.log("进详情页")
          this.$router.push({path: '/details',query: {fileObject: this.gaojilist[index]}})
        }
        this.gaojisousuotc = false;
    },
    // 高级搜索框显示
    gaojisousuo() {
      this.gaojisousuotc = true;
      this.gaojisearchajax()
    },
    // 高级搜索框按钮
    gaojibtn(index) {
      if (index == 0) {
				this.gaojibuttonyanse = 0;
				this.gaojisearchajax()
      }
      if (index == 1) {
				this.gaojibuttonyanse = 1;
				this.gaojisearchajax()
      }
    },
    // 高级搜索框ajax
    gaojisearchajax(){
			var zhi = this.sousuozhi   // 模糊值
			var time = this.radio      // 选择时间
			var type = this.radio1		 // 选择类型
			var zuijintype = this.gaojibuttonyanse   //0 最近查看，1 最近上传
			this.$axios({
				method:'post',
				url:'/mySpace/advancedSearch',
				headers: {
					'Accept':'application/json;',
					'Content-Type': 'application/json;'
				},
				data:{ 
					// userId:2,
					parentId:0,
					fileType:type,
					timeSlot:time,
					fileName:zhi,
					orderType:zuijintype,   //0 最近查看，1 最近上传
					page:1,
					size:20,
				}
			}).then((response) =>{   
				if(response.data.status == 200){
					console.log('搜索成功')
					var data = response.data.data
					var gaojilist = data.list
					if(gaojilist.length == 0){
						this.gaojiyou = false
					}else{
						this.gaojiyou = true
            gaojilist.forEach(element => {
              element.riqi= element.updateTime.substr(5,5).replace("-","月");
              element.time= element.updateTime.substr(11,5);
              if(element.fileType==0){
                element.fileFormat = element.fileName
                element.firstname=element.fileName
              }else{
                let fileName = element.fileName.lastIndexOf(".");//取到文件名开始到最后一个点的长度
                let fileNameLength = element.fileName.length;//取到文件名长度
                let fileFormat = element.fileName.substring(fileName + 1, fileNameLength);//截
                let firstname = element.fileName.substring(0,fileName);//截
                element.fileFormat = fileFormat
                element.firstname=firstname
              }
            });
            this.gaojilist = gaojilist
					}
				}
			}).catch((error) =>{
				console.log(error)  
			})
		},
    // 弹窗 1头像更改框   2高级搜索框    3代表确认删除弹窗 4 chongmingming 5 分享弹窗  6上传弹框  7移动框 8新建文件夹名
    gaojicha(index) {
      if (index == 1) {
        this.gaishow = false;
        this.tempurl=''
        
      }
      if (index == 2) {
        this.gaojisousuotc = false;
      }
      if (index == 3) {
        this.querenshanchu = false;
      }
      if (index == 4) {
        this.cmminputv=""
        this.chongmingming = false;
      }
      if (index == 5) {
        this.fenxiangtc = false;
        this.fenxiangdata=''
      }
      if (index == 6) {
        this.shangchuantc = false;
        this.upjindu=[]
      }
      if (index == 7) {
        this.yidongtc = false;
        this.selectydzdata=''
        this.caozuostatus=''
        this.yd_searchzi=''
      }
      if (index == 8) {
        this.tcxinfileName = false;
      }

      this.getselectlistdata()
      this.getroot()
    },
    // 移动到 复制到函数
    yd_fzdao(str,idlist=[],namelist=[]) {
      var requestdata={}

     

      if(idlist.length==0){
        requestdata.id=[this.treeclicklist[this.caozuoindex].id]
        requestdata.fileName=[this.treeclicklist[this.caozuoindex].fileName]
      }else{
        requestdata.id=idlist
        requestdata.fileName=namelist
      }

      requestdata.parentId=this.selectydzdata==''?this.data5[0].id:this.selectydzdata.id

      if(str=='yidong'){
        requestdata.status=2
      }
      if(str=='fuzhi'){
        requestdata.status=1
      }if(str=='plyidongdao'){
        requestdata.status=2
      }

      this.$axios({
          method:'post',
          url:'/file/cutOrCopy',
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          // id 为当前文件的id
            // filename为当前文件的文件名
            // parentId为要移动或复制的文件夹的id 根目录为0
            // status 参数:1为复制 2为移动
          data:requestdata
      }).then((response) =>{          //这里使用了ES6的语法
              //请求成功返回的数据
          if(response.data.msg='SUCCESS'){
            console.log(response)

            this.gaojicha(7)

          }
      }).catch((error) =>{
          console.log(error)       //请求失败返回的数据
      })
    },
    // 添加文件夹框
    tianjiawenjianjia() {
      this.zhuyeshow = !this.zhuyeshow;
    },
    // 头像设置显示隐藏
    shezhishows() {
      this.shezhishow = !this.shezhishow;
    },
    // 设置  头像 和  名称
    shezhis() {
      this.shezhishow = false;
      this.gaishow = true;
    },
    // 最近
    copy(){
        var Url2=document.getElementById("fuzhi");
        Url2.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        
        this.$message({
          showClose: true,
          message: '复制成功',
          type: 'success'
        });
    },
   


    // 模式切换
    qiehuan(moshiindex) {
      this.moshi = moshiindex;
      sessionStorage.setItem("moshi",this.moshi)
    },
    // 跳转至详情
    todetails() {
      //添加弹窗消失函数
      this.$router.push({ name: "details", query: { id: 1 } });
    },
    //切换时间正序倒叙
    tcpaixu() {
      this.istcpx = !this.istcpx;
    },

    //列表筛选显示隐藏
    shaixuan11tc() {
      this.shaixuan11 = !this.shaixuan11;
    },

    setsx_index(str,index){
      if(str=='listsxtime'){
        this.listsxtime=index
      }
      if(str=='listsxstyle'){
        this.listsxstyle=index
      }
      if(str=='listpaixu'){
        this.listpaixu=index
      }

      this.getselectlistdata()
    },

    // 检测整体上传状态

    jiancezhuangtai(){

      clearInterval(this.jindutimer)

      this.jindutimer=setInterval(() => {
        console.log('ssssssss')
        var baifenbi=this.upjindu.length*100
        var shishibaifenbi=0
        var flage=true

        var flage1=true

        this.upjindu.forEach(element => {

          shishibaifenbi=shishibaifenbi+element.uploadPercentage

          if(element.status==false){
            flage=false
            baifenbi=baifenbi-100
            shishibaifenbi=shishibaifenbi-element.uploadPercentage
          }
          if(element.status=='ok'){
            flage1=false
            console.log(element.status)
          }
        });

        console.log(shishibaifenbi)

        // if(flage==false){
        //   this.upzhuangtai=2
        //   clearInterval(this.jindutimer)
        // }else{
          
        // }

        if(shishibaifenbi==baifenbi){
            console.log(flage1)

          if(flage==false){

            if(flage1){
              this.upzhuangtai=2
              clearInterval(this.jindutimer)
            }
          }else{
              this.upzhuangtai=1
              clearInterval(this.jindutimer)
          }

        }else{
          this.upzhuangtai=0
        }
      }, 1000);
    },


    deep(oldObj){
      var newObj={};
      if(oldObj &&  typeof oldObj=="object" ){
        for(let i in oldObj ) {
          
          if(typeof oldObj[i]=="object"){//如果子还是对象那么循环调用值赋值
            newObj[i]=this.deep(oldObj[i]);
          }else{//直接值赋值
            newObj[i]=oldObj[i];
          }
        }
        return newObj
      }
    },

    diguishangchuan(files,step=0){


      
        var fd = new FormData();
        fd.append("file", files[step]);
        // fd.append("userId", 2);
        var parentId
        if(this.selectdata==''){
          parentId=this.data5[0].id
        }else{
          parentId=this.selectdata.id
        }
        fd.append("parentId",parentId );
        var xhr = new XMLHttpRequest();

        

        xhr.open("POST", this.$axios.defaults.baseURL+"/file/upload", true);
        xhr.setRequestHeader('Authorization1', 'Bearer ' +sessionStorage.getItem("token"));

        // var item={
        //   uploadPercentage:0,
        //   data:fd,
        //   name:files[step].name,
        //   status:'ok',
        //   uptype:1
        // }


      var name=files[step].name
      let fileName = name.lastIndexOf(".");//取到文件名开始到最后一个点的长度
      let fileNameLength = name.length;//取到文件名长度
      let fileFormat = name.substring(fileName + 1, fileNameLength);//截
      let firstname = name.substring(0,fileName);//截

      
      var fileType
      if(fileFormat==name){
        fileType=0
      }else{

        var flage=-1 
        this.filemap.forEach((value,index)=>{
          var value=value
          // console.log(value[obj.fileFormat],111111111111111111111111111111)
          if (value[fileFormat]){
            flage = index
          }
        })
        if (flage>-1){
          fileType = this.filemap[flage][fileFormat]
        }else{
          fileType = 6
        }
        // fileType=this.filemap[fileFormat]?this.filemap[fileFormat]:6

        // console.log(this.filemap[fileFormat])
      }
     

      var item={
        uploadPercentage:0,
        data:fd,
        status:'ok',
        uptype:1,
        name:name,
        fileFormat:fileFormat,
        fileType:fileType,
        xhr:xhr
      }

        xhr.upload.addEventListener(
          "progress",
          function(e) {
            item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
          },
          false
        );

       
        this.upjindu.unshift(item)
        // 上传弹窗
        this.shangchuantc=true
        xhr.send(fd);

        this.jiancezhuangtai()

        item.status='ok'

        var that=this
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {

              item.status=true
              var obj = JSON.parse(xhr.response);
              console.log(obj)

              if(obj.msg== "重复的文件名"){
                that.$message({
                  showClose: true,
                  message: '重复的文件 在上传队列已删除',
                  type: 'success'
                });
                // that.shangchuantc=false
                that.upjindu.shift()
                
              }
              that.getroot()
              that.getselectlistdata()
              that.jiancezhuangtai()
              if(step==files.length-1){
                // files=''
                return
              }else{
                that.diguishangchuan(files,step+1)
              }
             
            }else {
              item.status=false
              that.jiancezhuangtai()
              if(step==files.length-1){
                return
              }else(
                that.diguishangchuan(files,step+1)
              )
            }
          }
        };
      
    },

    // 取消上传
    quxiaoshangchuan(index){
      var item=this.upjindu[index]
      item.xhr.abort()
      item.status=false
      // this.upzhuangtai=2
    },


    //上传文件
    uploadFile() {

      console.log('gaibianle')

      let inputDOM = this.$refs.inputer;
      var files = inputDOM.files;

       this.filess=files

      console.log(files)
      // var file=[]
      if(files[0]==undefined){
        return
      }

      // this.upjindu=[]
      if(this.upzhuangtai!=0){
        this.qudiaochengong()
      }


      if(this.upzhuangtai==0){

        for(var i=0;i<files.length;i++){
          this.filess.push(files[i])
        }

       
      }else{
        this.filess=[]


        for(var i=0;i<files.length;i++){
          this.filess.push(files[i])
        }
        this.diguishangchuan(this.filess,0)
      }
       
    },

    uploadFile1click(){
      this.zhuyeshow=false
      this.otherinput=!this.otherinput
    },

    uploadFile1() {

      if(this.otherinput==false){
        let inputDOM = this.$refs.inputer1;
        var files = inputDOM.files;
      }else{
        let inputDOM = this.$refs.inputer111;
        var files = inputDOM.files;
      }
      

      this.filess=[]


      for(var i=0;i<files.length;i++){
        this.filess.push(files[i])
      }

       if(files[0]==undefined){
        return
      }

       console.log(files)

      console.log(files)
     
      var fd = new FormData();
  
      for(var i=0 ;i<files.length;i++){
        console.log(files.length)
        fd.append("file", files[i]);
      }

      var parentId
      // console.log(this.selectdata)
      if(this.selectdata==''){
        parentId=0
      }else{
        parentId=this.selectdata.id
      }


      // fd.append("userId", 2);
      fd.append("parentId", parentId);
      var xhr = new XMLHttpRequest();
     
      xhr.open("POST", this.$axios.defaults.baseURL+"/file/upload", true);

      xhr.setRequestHeader('Authorization1', 'Bearer ' +sessionStorage.getItem("token"));

      // var aaa = this.deep(files);

      var name=files[0].webkitRelativePath.split("/")[0]


      let fileName = name.lastIndexOf(".");//取到文件名开始到最后一个点的长度
      let fileNameLength = name.length;//取到文件名长度
      let fileFormat = name.substring(fileName + 1, fileNameLength);//截
      let firstname = name.substring(0,fileName);//截

      
      var fileType
      if(fileFormat==name){
        fileType=0
      }else{
        var flage=-1 
        this.filemap.forEach((value,index)=>{
          var value=value
          // console.log(value[obj.fileFormat],111111111111111111111111111111)
          if (value[fileFormat]){
            flage = index
          }
        })
        if (flage>-1){
          fileType = this.filemap[flage][fileFormat]
        }else{
          fileType = 6
        }
      }
     

      var item={
        uploadPercentage:0,
        data:fd,
        status:'ok',
        uptype:0,
        name:name,
        fileFormat:fileFormat,
        fileType:fileType,
        xhr:xhr
      }
      xhr.upload.addEventListener(
        "progress",
        function(e) {
          item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
        },
        false
      );
      this.upjindu.unshift(item)
      // 上传弹窗
      this.shangchuantc=true

      xhr.send(fd);
      this.jiancezhuangtai()
      item.status='ok'
      var that=this
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            item.status=true
            var obj = JSON.parse(xhr.response);
             
              that.getroot()
              that.getselectlistdata()

              that.jiancezhuangtai()
          } else {
           
            item.status=false
             that.jiancezhuangtai()
          }
        }
      };
    },


    qudiaochengong(){
      var newupjindu=[]
      this.upjindu.forEach(element => {
        if(element.status==false){
          newupjindu.push(element)
        }

        if(element.status=="ok"){
          newupjindu.push(element)
        }
      });
      this.upjindu=newupjindu
    },

    jixushangchuan(){
      let inputDOM = this.$refs.inputer2;
      var files = inputDOM.files;


      console.log(files)

      if(files[0]==undefined){
        return
      }

      // this.upjindu=[]
      if(this.upzhuangtai!=0){
        this.qudiaochengong()
      }

      if(this.upzhuangtai==0){
        for(var i=0;i<files.length;i++){
          this.filess.push(files[i])
        }
      }else{
        this.filess=[]


        for(var i=0;i<files.length;i++){
          this.filess.push(files[i])
        }
        this.diguishangchuan(this.filess,0)
      }

    },


    // 重新上传
    chongxinup(index){

      var fd=this.upjindu[index].data

      console.log(fd.get('file'))

      if(this.upjindu[index].uptype==0){
        
        var xhr = new XMLHttpRequest();
        
        xhr.open("POST", this.$axios.defaults.baseURL+"/file/upload", true);
        xhr.setRequestHeader('Authorization1', 'Bearer ' +sessionStorage.getItem("token"));
        
        var item=this.upjindu[index]

        item.xhr=xhr
        item.status='ok',
        item.uploadPercentage=0

        xhr.upload.addEventListener(
          "progress",
          function(e) {
            item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
          },
          false
        );
        
        // 上传弹窗
        this.shangchuantc=true

        xhr.send(fd);
        this.jiancezhuangtai()
        var that=this
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var obj = JSON.parse(xhr.response);
                item.status=true,
                that.getroot()
                that.getselectlistdata()

                that.jiancezhuangtai()
            } else {
              
              item.status=false
              that.jiancezhuangtai()
            }
          }
        };
      }else{
        
        var xhr = new XMLHttpRequest();
        
        xhr.open("POST", this.$axios.defaults.baseURL+"/file/upload", true);

        xhr.setRequestHeader('Authorization1', 'Bearer ' +sessionStorage.getItem("token"));
        var item=this.upjindu[index]


        item.xhr=xhr
        item.status='ok',
        item.uploadPercentage=0

        xhr.upload.addEventListener(
          "progress",
          function(e) {
            item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
          },
          false
        );

        
        // 上传弹窗
        this.shangchuantc=true
        xhr.send(fd);
        this.jiancezhuangtai()
        var that=this
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var obj = JSON.parse(xhr.response);
              item.status=true,
              
              that.getroot()
              that.getselectlistdata()

              that.jiancezhuangtai()
            } else {
            
              item.status=false
              that.jiancezhuangtai()
            }
          }
        };
      }
    },


    //显示选中box
    showbox(){
      if(this.changyongbox == true){
        this.changyongbox=false
        this.showallbox=!this.showallbox
      }else{
        this.showallbox=!this.showallbox
      }
      
    },
    // 常用选中box
    changyongshow(){
      if(this.showallbox == true){
        this.showallbox=false
        this.changyongbox=!this.changyongbox
      }else{
        this.changyongbox=!this.changyongbox
      }
      
    },
    changyongselect(index){

      this.changyonglist[index].checked=!this.changyonglist[index].checked
      var flage=true
      this.changyonglist.forEach(element => {

        if(element.checked==false){
          flage=false
        }
      });
      if(flage==false){
        this.changyongall=false
      }
      if(flage==true){
        this.changyongall=true
      }

      
    },
    //单个取消 恢复选中
    danselect(index) {
      this.treeclicklist[index].checked = !this.treeclicklist[index].checked;
      var flage=true
      this.treeclicklist.forEach(element => {
        console.log(element)
        if(element.checked==false){
          flage=false
        }
      });

      if(flage==false){
        this.selectall=false
      }
      if(flage==true){
        this.selectall=true
      }

      
    },
    quxiaoquanxuan(){
      console.log(this.treeclicklist,'this.treeclicklist')
      this.treeclicklist.forEach(element => {
        element.checked=false
      });
      this.selectall=false
      this.showallbox=false
      this.changyonglist.forEach(element => {
        element.checked=false
      });
      this.changyongall=false
      this.changyongbox=false
    },
    cselectall(){
      if(!this.selectall==true){
        this.treeclicklist.forEach(element => {
            element.checked=true
        });
      }else{
        this.treeclicklist.forEach(element => {
            element.checked=false
        });
      }
      this.selectall=!this.selectall
    },
    changyongquanxuan(){
      if(!this.changyongall==true){
        this.changyonglist.forEach(element => {
            element.checked=true
        });
      }else{
        this.changyonglist.forEach(element => {
            element.checked=false
        });
      }
      this.changyongall=!this.changyongall
    },
    //去文件夹


    settreeselect(key){
      sessionStorage.setItem('currentid',key)
      const store = this.$refs.tree.store;
      // console.log(store,key,'123465748979878789')
      store.setCurrentNodeKey(key);
      this.mianbaoxie=[]
      this.diguimbx(store.getNode(key))
      this.selectdata=store.getNode(key).data
    },


    towenjianjia(e,index,style){
      if(e.target.className=='shengluehover isshengluehao'){
          // console.log('ss')
          if (this.treeclicklist[index].showtc == false) {
            this.treeclicklist.forEach(element => {
              element.showtc = false;
            });
            
            this.treeclicklist[index].showtc = true;
          } else {
            // console.log('2')
            this.treeclicklist[index].showtc = false;
          }

      }else if(e.target.className=='latelyitembody'||e.target.className=='imgbox'||e.target.className=='itemname'||e.target.className=='itemtime'||e.target.className=='imgbox1'){
        if(this.selectqian==3){
          return
        }
        
        if(style==0){
          // 进文件夹
          console.log("进文件夹")
          // console.log(data);
          // console.log(node.data.name);
          this.settreeselect(this.treeclicklist[index].id)

          this.selectqian=2
          this.listpaixu=1
          this.highlight=true
          //显示模块
          this.showzhuyechangyong = false;
          this.showzuijin = false;
          this.showhuishouzhan = false;
          this.showwodewenjian = true;
         
          this.getselectlistdata()

        }else{
          // 进详情页
          console.log("进详情页")
          sessionStorage.setItem('moshi',1);
          this.$router.push({path: '/details',query: {fileObject: this.treeclicklist[index]}})
        }
      }else if(e.target.className=='changyong'){
          console.log("changyong")
         
          this.changyongajax(index,'changyong')
      }
      else if(e.target.className=='xingbiao'){
          console.log("xingbiao")
           this.changyongajax(index,'xingbiao')
      }
      else if(e.target.className=='fenxiang'){
          console.log("fenxiang")
          // console.log(index)
          this.caozuoindex=index

          
          this.getfenxiang([this.treeclicklist[index].id,])

          this.fenxiangtc=true
      }
      else if(e.target.className=='yidong'){
          console.log("yidong")
          this.caozuoindex=index
          this.yidongtc=true
          this.caozuostatus='yidong'
      }
      else if(e.target.className=='fuzhidao'){
          console.log("yidong")
          this.caozuoindex=index
          this.yidongtc=true
           this.caozuostatus='fuzhi'
      }
       else if(e.target.className=='xiazai'){
        console.log("xiazai")
        return
       
      }

      else if(e.target.className=='dabaoxiazai'){
        console.log("dabaoxiazai")

        this.dabaoxiazai('nochangyong',index)
       
      }

      else if(e.target.className=='yuanshi'){
        console.log("yuanshi")

        this.xiazai('nochangyong','yuan',index)
      }
      else if(e.target.className=='pdfdown'){
        console.log("pdfdown")

        this.xiazai('nochangyong','pdf',index)
      }

      else if(e.target.className=='chongmingming'){
          console.log("chongmingming")
           this.caozuoindex=index
           this.chongmingming=true
           this.$nextTick(() => { // 2. 弹框显示DOM更新完成后 获取refs.ref1 设置焦点
            console.log(this.$refs.getFocus)
            this.$refs.getFocus.focus() // 设置焦点
          })
          if(this.treeclicklist[index].fileType == 0){
            this.cmminputv=this.treeclicklist[index].firstname
            this.houzhui=''
          }else{
            this.cmminputv=this.treeclicklist[index].firstname
            this.houzhui=this.treeclicklist[index].fileFormat
          }
      }
      else if(e.target.className=='shanchu'){
          console.log("shanchu")
          this.panduan=2
          this.querenshanchu=true
          this.caozuoindex=index

          
      }
      else if(e.target.className=='huifu'){
          console.log("huifu")
          this.hf_scfun('huifu',index)
      } 
      else if(e.target.className=='chedishanchu'){
          console.log("chedishanchu")
          this.panduan=3
          this.querenshanchu=true
          this.caozuoindex=index
      }
    },


    //调取常用 接口
    // 1)设为常用 isCommonly为必填项 其他非必填 1为常用 0为非常用
    // 2)设为星标 isFollow为必填项 其他非必填 1为星标 0为非星标 
    // 3)重命名 fileName为必填项 其他非必填
    // 3)设为删除 isDelete为必填项 其他非必填 1为删除 0为不删除
    changyongajax(index,str,ip="tree"){
      console.log(ip,'ip')
      var requestdata={}
      if(ip == "tree"){
        requestdata.id=this.treeclicklist[index].id
      }else{
        requestdata.id=this.changyonglist[index].id
        this.ip = "tree"
      }
      
      if(str=="changyong"){
        if(this.treeclicklist[index].isCommonly == 0){
          requestdata.isCommonly=1
        }else{
          requestdata.isCommonly=0
        }
        
      }
      if(str=="xingbiao"){
        if(this.treeclicklist[index].isFollow == 0){
          requestdata.isFollow=1
        }else{
          requestdata.isFollow=0
        }
      }
      if(str=="shanchu"){
        requestdata.isDelete=1
      }
      if(str=="chongmingming"){
        
        if(this.cmminputv==''){
          this.$message({
            showClose: true,
            message: '重命名不能为空',
            type: 'error'
          });
          return
        }else{
          if(this.houzhui == ''){
            this.cmminputv = this.cmminputv
          }else{
            this.cmminputv = this.cmminputv + '.' + this.houzhui
          }
          
          requestdata.fileName=this.cmminputv
        }
      }
      

      this.$axios({
          method:'post',
          url:'/file/setUp',
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          data:requestdata
      }).then((response) =>{          //这里使用了ES6的语法
              //请求成功返回的数据
          if(response.data.msg='SUCCESS'){
            console.log(response)
            if(str=="chongmingming"){
              this.gaojicha(4)
            }

            if(str=="shanchu"){
              this.gaojicha(3)

              this.$message({
                showClose: true,
                message: '删除成功',
                type: 'success'
              });
            }

            this.getselectlistdata()
            this.getroot()
            this.getchangyonglist()
          }
      }).catch((error) =>{
          console.log(error)       //请求失败返回的数据
      })
    },

    // tree批量操作
    pl_caozuo(str){
      var idlist=[]
      var namelist=[]
      this.treeclicklist.forEach(element => {
        if(element.checked==true){
          idlist.push(element.id)
          namelist.push(element.fileName)
        }
      });

      if(idlist.length==0){
        this.$message({
          showClose: true,
          message: '请选择文件',
          type: 'error'
        });
        return
      }
      if(str=='huifu'){
        this.hf_scfun(str,0,idlist)
      }
      if(str=='chedishanchu'){
        this.panduan=4
        this.querenshanchu=true
        this.plidlist=idlist
      }

       if(str=='plshanchu'){
        this.panduan=5
        this.querenshanchu=true
        this.plidlist=idlist
      }
      if(str=='plyidongdao'){

        
        this.yidongtc=true
        this.caozuostatus='plyidongdao'

        this.namelist=namelist
        this.plidlist=idlist
      }

      if(str=='plxiazai'){
        this.plidlist=idlist
        this.plxiazaiwj()
      }
      if(str=='plfenxiang'){
        this.plidlist=idlist
        this.getfenxiang(idlist)
        this.fenxiangtc=true
      }
    },
    //常用批量操作
    pl_caozuocy(str){
      var idlist=[]
      var namelist=[]
      this.changyonglist.forEach(element => {
        if(element.checked==true){
          idlist.push(element.id)
          namelist.push(element.fileName)
        }
      });

      if(idlist.length==0){
        this.$message({
          showClose: true,
          message: '请选择文件',
          type: 'error'
        });
        return
      }


      if(str=='plxiazai'){
        this.plidlist=idlist
        this.plxiazaiwj()
        
      }
      if(str=='plfenxiang'){
        this.plidlist=idlist
        this.getfenxiang(idlist)
        this.fenxiangtc=true
        
      }

      if(str=='plyichu'){
        this.plidlist=idlist
        this.diguiyichu(idlist,0)
        
      }
    },
    
    
    diguiyichu(idlist,i){
      var that=this
      that.$axios({
        method:'post',
        url:'/file/setUp',
        headers: {
          'Accept':'application/json;',
          'Content-Type': 'application/json;'
        },
        data:{ 
          id:idlist[i],
          isCommonly:0   // 1为常用 0为非常用
        }
      }).then((response) =>{   
        if(response.data.status == 200){
          i++
          console.log(i)
          if(idlist.length>i){
            
            that.diguiyichu(idlist,i)
          }else{
            that.$message({
                showClose: true,
                message: '已移除',
                type: 'success'
            });

            that.changyongbox=false
            this.getchangyonglist()
          }
        }
       

      }).catch((error) =>{
        console.log(error)  
      })
    },




    // getFile (data) {
    //   return this.$axios({
    //     url: '/file/bulkDownloadFile',
    //     method: 'get',
    //     data:{
    //       id:data
    //     },
    //     responseType: 'arraybuffer' // 添加这句
    //   });
    // },
    // downloadFile (file, filename = '') {
    //     console.log(file)
    //     let blob = new Blob(
    //         [file], 
    //         {
    //             type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
    //         });
    //     let downloadElement = document.createElement('a');
    //     let href = window.URL.createObjectURL(blob); //创建下载的链接
    //     downloadElement.href = href;
    //     downloadElement.download = filename; //下载后文件名
    //     document.body.appendChild(downloadElement);
    //     downloadElement.click(); //点击下载
    //     document.body.removeChild(downloadElement); //下载完成移除元素
    //     window.URL.revokeObjectURL(href); //释放掉blob对象
    // },

    // //批量下载文件
    // async plxiazaiwj(){
    //   console.log('da')
    //   try {
    //       const file = await this.getFile(this.plidlist);
    //       console.log(file)
    //       this.downloadFile(file, '打包下载.zip');
    //   } catch (err) {
    //       // catch
    //     console.log(err)
    //   }
    // },


    plxiazaiwj(str,index){
    //  this.plidlist.
    var ids=this.plidlist.join(",");
    var that=this
    //  /file/bulkDownloadFile?ids=14144,14145

     that.loading=true
      that.$axios({

          method:'get',
          url:'/file/bulkDownloadFile?ids='+ids,
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          responseType:'blob',
        }).then((data) =>{   
          console.log(data)
          if (!data) {
              return
          }

          that.loading=false
          // debugger
          let url = window.URL.createObjectURL(data.data)
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download',"批量打包下载"+'.zip')
          document.body.appendChild(link)

          link.click()
          

        }).catch((error) =>{
          console.log(error)  
        })
    },

    // 回收站 恢复彻底删除

    hf_scfun(str,index,idlist=[]){
      var url
      if(str=='chedishanchu'){
        url='/dustbin/deleteThoroughly'
      }
      if(str=='huifu'){
        url='/dustbin/recoveryFile'
      }

       var requestdata=[]
      if(idlist.length==0){
       
        requestdata.push(this.treeclicklist[index].id)
      }else{
        requestdata=idlist
      }

      this.$axios({
          method:'post',
          url:url,
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          data:{
            id:requestdata
          }
      }).then((response) =>{          //这里使用了ES6的语法
              //请求成功返回的数据
          if(response.data.msg='SUCCESS'){
            console.log(response)

            if(str=="chedishanchu"){
              this.gaojicha(3)

              this.$message({
                showClose: true,
                message: '彻底删除成功',
                type: 'success'
              });
            }
            if(str=="huifu"){
               this.$message({
                showClose: true,
                message: '恢复成功',
                type: 'success'
              });
              this.getselectlistdata()
              this.getroot()
            }
            this.showallbox=false
          }
      }).catch((error) =>{
          console.log(error)       //请求失败返回的数据
      })
    },

    // 去文件夹2

    towenjianjia2(e,index,style){
     
      if(e.target.className=='isshengluehaolie' || e.target.className=='isshengluehaolieimg'){
          console.log('ss')
          if (this.treeclicklist[index].showtc == false) {
            this.treeclicklist.forEach(element => {
              element.showtc = false;
            });
            
            this.treeclicklist[index].showtc = true;
          } else {
            console.log('2')
            this.treeclicklist[index].showtc = false;
          }

      }else if(e.target.className=='imgbox1'||e.target.className=='itemtimelie'||e.target.className=='itemname'||e.target.className=='namelie'){

        if(this.showallbox==true){
          return
        }

        if(this.selectqian==3){
          return
        }

        if(style==0){
          // 进文件夹
          console.log("进文件夹")

           // console.log(data);
          // console.log(node.data.name);
          this.settreeselect(this.treeclicklist[index].id)

          this.selectqian=2
          this.listpaixu=1
          this.highlight=true
          //显示模块
          this.showzhuyechangyong = false;
          this.showzuijin = false;
          this.showhuishouzhan = false;
          this.showwodewenjian = true;
          
          this.getselectlistdata()
        }else{
          // 进详情页
          console.log("进详情页")
          console.log(e.target.className)
          sessionStorage.setItem('moshi',2);
          this.$router.push({path: '/details',query: {fileObject: this.treeclicklist[index]}})
        }
      }else if(e.target.className=='yuanshiwenjian'){
          this.xiazai('nochangyong','yuan',index)
          console.log("xiazai")

      }else if(e.target.className=='zhidubanben'){
          this.xiazai('nochangyong','pdf',index)
          console.log("xiazai")

      }else if(e.target.className=='fenxianghao'){
          console.log("fenxiang")

         this.getfenxiang([this.treeclicklist[index].id,])

          this.fenxiangtc=true
          
      }else if(e.target.className=='changyong'){
          console.log("changyong")
          this.changyongajax(index,'changyong')
      }
      else if(e.target.className=='xingbiao'){
          console.log("xingbiao")
           this.changyongajax(index,'xingbiao')
      }
      else if(e.target.className=='yidong'){
          console.log("yidong")
          this.caozuoindex=index
          this.yidongtc=true
          this.caozuostatus='yidong'
      }
      else if(e.target.className=='fuzhidao'){
          console.log("yidong")
          this.caozuoindex=index
          this.yidongtc=true
           this.caozuostatus='fuzhi'
      }
      else if(e.target.className=='chongmingming'){
          console.log("chongmingming")
           this.caozuoindex=index
           this.chongmingming=true
           this.$nextTick(() => { // 2. 弹框显示DOM更新完成后 获取refs.ref1 设置焦点
            console.log(this.$refs.getFocus)
            this.$refs.getFocus.focus() // 设置焦点
          })
          if(this.treeclicklist[index].fileType == 0){
            this.cmminputv=this.treeclicklist[index].firstname
            this.houzhui=''
          }else{
            this.cmminputv=this.treeclicklist[index].firstname
            this.houzhui=this.treeclicklist[index].fileFormat
          }
      }
      else if(e.target.className=='shanchu'){
          console.log("shanchu")
          this.panduan=2
          this.querenshanchu=true
          this.caozuoindex=index
      }

      else if(e.target.className=='dabaoxiazai'){
        console.log("dabaoxiazai")
        this.dabaoxiazai('nochangyong',index)
      }

      else if(e.target.className=='yuanshi'){
        console.log("yuanshi")

        window.location.href = this.$axios.defaults.baseurl + "/file/downloadFile/"+this.treeclicklist[index].id
      }
      else if(e.target.className=='pdfdown'){
        console.log("pdfdown")

        window.location.href = this.$axios.defaults.baseurl + "/file/downloadFilePDF/"+this.treeclicklist[index].id
      }


      else if(e.target.className=='huifu'){
          console.log("huifu")
          this.hf_scfun('huifu',index)
      } 
      else if(e.target.className=='chedishanchu'){
          console.log("chedishanchu")
          this.panduan=3
          this.querenshanchu=true
          this.caozuoindex=index

          
      }
    },

    clear(){
      this.$axios({
          method:'get',
          url:'/dustbin/clear',
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          data:{
            // userId:2
          }
      }).then((response) =>{          //这里使用了ES6的语法
              //请求成功返回的数据
          if(response.data.msg='SUCCESS'){
            console.log(response)

            this.gaojicha(3)

            this.$message({
              showClose: true,
              message: '回收站已清空',
              type: 'success'
            });
          }
      }).catch((error) =>{
          console.log(error)       //请求失败返回的数据
      })
    },

    clickclear(){
      console.log("chedishanchu")
      this.panduan=1
      this.querenshanchu=true
    },

    del(){
      if(this.panduan==1){
        //清空
        this.clear()
      }
      if(this.panduan==2){
        //删除
        if(this.ip == "tree"){
          this.changyongajax(this.caozuoindex,'shanchu')
        }else{
          this.changyongajax(this.caozuoindex,'shanchu',"falsetree")
        }
        
      }
      if(this.panduan==3){
        //彻底删除
        this.hf_scfun('chedishanchu',this.caozuoindex)
      }
      if(this.panduan==4){
        //彻底删除
        this.hf_scfun('chedishanchu',0,this.plidlist)
      }
       if(this.panduan==5){
        //删除
        // this.plidlist
        this.danshanchu()
      }
    },



    danshanchu(){
      this.$axios({
          method:'post',
          url:'/file/delete',
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          data:{
            // userId:2,
            id:this.plidlist
          }
      }).then((response) =>{          //这里使用了ES6的语法
              //请求成功返回的数据
          if(response.data.msg='SUCCESS'){
            console.log(response)

            this.gaojicha(3)

            this.$message({
              showClose: true,
              message: '删除成功',
              type: 'success'
            });
          }
      }).catch((error) =>{
          console.log(error)       //请求失败返回的数据
      })
    },

    huachuanghu(){

      console.log('cao')

      if(this.showcanvas==false){
        return
      }
      
      var canvas = document.getElementById("canvasId");
      var context = canvas.getContext("2d");

      canvas.width = document.documentElement.clientWidth;
      canvas.height = document.documentElement.clientHeight;
      context.fillStyle = "rgba(0,0,0,0.5)"; //设置填充色（可以是渐变色或半透明色）
      context.fillRect(0, 0, canvas.width, canvas.height); //填充背景我色
      if(this.step==1){
        context.clearRect(canvas.width-270, 110, 250, 60); //抠出一个矩形区域
      }
      if(this.step==3){
        context.clearRect(250, 220, 350, 100); //抠出一个矩形区域
      }
      if(this.step==2){

        console.log('cao')
        
        context.clearRect(15, 155, 220, 60); //抠出一个矩形区域
      }

    },

    nextstep(index){
      if(index==4){
        this.showcanvas=false
        sessionStorage.setItem('isFirst','false');
      }
      else{
        this.step = index
        console.log(this.step,'第几部')
        this.huachuanghu()
      }
    },

    getpcUserInfo(){
      this.$axios({
          method:'get',
          url:'/pcUserInfo',
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          
      }).then((response) =>{          //这里使用了ES6的语法
              //请求成功返回的数据
          if(response.data.msg='SUCCESS'){
            console.log(response)
            this.pcUserInfodata=response.data.data
            this.userInfo=response.data.data.userInfo
          }
      }).catch((error) =>{
          console.log(error)       //请求失败返回的数据
      })
    },

    uppcUserInfo(file,nickname){
      var fd = new FormData();
      fd.append("file", file);
      fd.append("nickName", nickname);
      var that=this
      this.$axios({
          method:'post',
          url:'/updateUserInfo',
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          data:fd,
          
      }).then((response) =>{          //这里使用了ES6的语法
              //请求成功返回的数据
          if(response.data.msg='SUCCESS'){
            console.log(response)

            that.gaishow=false
            that.getpcUserInfo()
          }
      }).catch((error) =>{
          console.log(error)       //请求失败返回的数据
      })
    },

    changeuserinfofile(){
      let inputDOM = this.$refs.inputer10;
      var file = inputDOM.files[0];

      var reader = new FileReader();
      reader.readAsDataURL(file);
      var that=this
      reader.onload = function (e) {
          that.tempurl = e.target.result;
           
      }
    },

    sureupUserinfo(){
      let inputDOM = this.$refs.inputer10;
      var file = inputDOM.files;

      let inputDOM1 = this.$refs.inputer11;
      var nickname = inputDOM1.value;

      console.log(file,nickname) 
      

      this.uppcUserInfo(file[0],nickname)
    },

    tuichudenglu(){
      sessionStorage.removeItem("token")
      this.$router.push({path: '/login'})
    },


    searchrootlist(){
      
      var that=this
      this.$axios({
          method:'post',
          url:'/mySpace/folderSearch',
          headers: {
            'Accept':'application/json;',
            'Content-Type': 'application/json;'
          },
          data:{
            // userId:2,
            fileName:that.yd_searchzi
          }
      }).then((response) =>{          //这里使用了ES6的语法
              //请求成功返回的数据
          if(response.data.msg='SUCCESS'){
            console.log(response)
              
              if(response.data.data.length==0){
                this.showsearchzw=true
                this.showtree=true
                this.showitem=false
              }else{
                this.showsearchzw=false
                this.showtree=false
                this.showitem=true
              }
              that.yd_searchlist=response.data.data
           
          }
      }).catch((error) =>{
          console.log(error)       //请求失败返回的数据
      })
    },
    totree(id){
      var tree1=this.$refs.tree1.setCurrentKey(id)

      this.selectydzdata = this.$refs.tree1.getNode(id).data;

      this.showsearchzw=false
      this.showtree=true
      this.showitem=false

    }
  
  },

  

 
  beforeMount () {
    // sessionStorage.removeItem("moshi")
    if(sessionStorage.getItem("moshi") == 2){
       this.moshi=2
    }else{
      this.moshi=1
    }
      if(sessionStorage.getItem("token")){
        console.log('刷新')
        
        this.getroot();
        this.getchangyonglist()
        this.getpcUserInfo()


      }else{
        this.$router.push({path: '/login'})
      }


      console.log('aaaaaaaaaaaaaa')
      console.log(sessionStorage.getItem("isFirst"))
      if(sessionStorage.getItem("isFirst") == 'true'){
        this.showcanvas = true
        console.log('aaaaaaaaaaaaaa')
      }else{
        this.showcanvas = false
      }

  },

  mounted() {
    // this.restaurants = this.loadAll();
   
    
   


    // window.onresize=() => {
    //   console.log(document.documentElement.clientWidth)
    // }

    var that=this

    //  window.addEventListener('resize', function(){
    //    this.screenWidth==document.documentElement.clientWidth
    //    console.log( this.screenWidth)
    // })
   

    document.addEventListener("click", function(e) {
      var initem = false;
      var intcpx = false;

      var shaixuan11 = false;
      // var sousuo11=false;

      var shezhi = false;
      var tianjiawenjianjia = false;
      // 常用弹框
      var changyshwo=false
     

      e.path.forEach(element => {
        
        
        if (
          element.className == "isshengluehao" ||
          element.className == "isshengluehaolie"
        ) {

          initem = true;
        }

        // console.log(initem,'1111111111111')
       
        if (element.className == "shijian") {
          intcpx = true;
        }

        if (element.className == "shaixuan11") {
          shaixuan11 = true;
        }
        // if (element.className == "searchkuang") {
        //   sousuo11 = true;
        // }
        if (element.className == "search-portrait") {
          shezhi = true;
        }
        if (element.className == "zhuyess") {
          tianjiawenjianjia = true;
        }
        // 常用弹框
        if(element.className == "chang3-right" || element.className == "chang3tu"){
          changyshwo = true
        }
      });
      // console.log(intcpx)
      if (initem == false) {
        // console.log(88888888888888)
        that.treeclicklist.forEach(element => {
          // console.log(9999999999999)
          element.showtc = false;
        });
      }
      // 常用弹框
      if(changyshwo == false){
        that.changyonglist.forEach(element => {
          element.showtc = false;
        });
      }
      if (intcpx == false) {
        that.istcpx = false;
      }
      if (shaixuan11 == false) {
        that.shaixuan11 = false;
      }
      // if(sousuo11 == false){
      //   that.searchshow=false;
      // }
      if (shezhi == false) {
        that.shezhishow = false;
      }
      if (tianjiawenjianjia == false) {
        that.zhuyeshow = false;
      }
    });

    window.onresize = () => {
       that.screenWidth=document.documentElement.clientWidth
    // 1184   1414  1644  1874
      if(that.screenWidth>1184&&that.screenWidth<1414){
        that.listnum=4
      }
      if(that.screenWidth>1414&&that.screenWidth<1644){
        that.listnum=5
      }
      if(that.screenWidth>1644&&that.screenWidth<1874){
        that.listnum=6
      }
      if(that.screenWidth>1874){
        that.listnum=7
      }

    //1284 -1634

      if(that.screenWidth>1630){
        that.cylistnum=4
      }

      if(that.screenWidth>1280&&that.screenWidth<1630){
        that.cylistnum=3
      }

      return (() => {
        that.huachuanghu()
        
    })()
    }

    this.screenWidth=document.documentElement.clientWidth
    // 1184   1414  1644  1874
    if(this.screenWidth>1184&&this.screenWidth<1414){
      this.listnum=4
    }
    if(this.screenWidth>1414&&this.screenWidth<1644){
      this.listnum=5
    }
    if(this.screenWidth>1644&&this.screenWidth<1874){
      this.listnum=6
    }
    if(this.screenWidth>1874){
      this.listnum=7
    }


     if(this.screenWidth>1634){
        this.cylistnum=4
      }

      if(this.screenWidth>1284&&this.screenWidth>1634){
        this.cylistnum=3
      }


    that.huachuanghu()
   
  },

  



  watch: {
    ydxinjian: {
      handler(newName, oldName) {
        // ...
      },
      deep: true // immediate: true
    },
    selectdata: {
      handler(newName, oldName) {
        // ...
      },
      deep: true
    },
     data5: {
      handler(newName, oldName) {
        // ...
      },
      deep: true
    },
    // 高级搜索框筛选
    radio(val){
      this.radio = val
      this.gaojisearchajax()
    },
    radio1(val){
      this.radio1 = val
      this.gaojisearchajax()
    },
    sousuozhi(val){
      this.sousuozhi = val
      this.gaojisearchajax()
    },
    searchdezhi(val){
      this.searchdezhi = val
      this.searchkuang()
    },

    yd_searchzi(val){
      this.yd_searchzi = val
      this.searchrootlist()
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
  width: 100%;
  height: 100%;
}

.app-logo {
  font-size: 22px;
  color: #fff;
  /* text-align: center; */
  margin-top: 42px;
  margin-bottom: 30px;
  margin-bottom: 30px;
  padding-left: 42px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  
}
.app-logo img {
      width: 28px;
    margin-right: 10px;
    height: 26px;
  /* vertical-align: middle; */
}
.app-begin {
  cursor:pointer;
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  color: #fff;
  /* background: #2D2D2D; */
  padding-left: 44px;
  box-sizing: border-box;

}
.app-begin img {
  width: 20px;
  vertical-align: middle;
  margin-right: 8px;
}
.app-begin div {
  display: inline-block;
}

.app-begin:hover,.app-recycle:hover{
 background: #2D2D2D;
}

.app-my {
  width: 240px;
  font-size: 16px;
  color: #fff;
  box-sizing: border-box;
  height: calc(100vh - 256px);
  overflow: hidden;
  overflow-y: scroll;
}
.app-recycle {
  width: 240px;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  color: #fff;
  position: fixed;
  /* left: 55px; */
  bottom: 30px;
  padding-left: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.app-recycle img {
  width: 26px;
  margin-right: 10px;
}

/* 左边主要内容 */
.el-container.is-vertical {
  background: #f7f7f7;
}

/* 搜索 */
.search {
  width: 100%;
  display: flex;
  height: 100px;
  justify-content: space-between;
  align-items: center;
  /* margin-top: 12px; */
  padding-top: 8px;
  box-sizing: border-box;
}
.searchkuang {
  width: 80%;
  height: 40px;
  margin-left: 24px;
  position: relative;
}
.sousuo {
  width: 100%;
  height: 52px;
  border-radius: 10px;
  background: #fff;
  padding-left: 66px;
  box-sizing: border-box;
  font-size: 14px;
}
.searchkuang-img1 {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 20px;
  top: 16px;
}
.searchkuang-img2 {
  width: 15px;
  height: 15px;
  position: absolute;
  right: 25px;
  top: 18px;
}
/* 搜索下拉框 */
.sousuoxialakuang {
  width: 100%;
  height: 466px;
  padding-left: 30px;
  padding-right: 30px;
  position: absolute;
  left: 0px;
  top: 60px;
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  z-index: 101;
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.1);
}
.sousuoxialatit {
  font-size: 14px;
  margin-top: 25px;
  color: #c3c3c3;
}
.sousuoxiakajihe{
  height: 360px;
  overflow-y: scroll;
}
.gaojisousuoanniu {
  border-top: 1px solid #f6f6f6;
  display: flex;
  align-items: center;
  height: 68px;
  font-size: 16px;
  color: #333333;
  position: absolute;
  left: 0;
  bottom: 0;
  padding-left: 30px;
  box-sizing: border-box;
  width: 100%;
}
.gaojisousuoanniu img {
  width: 24px;
  margin-right: 14px;
  margin-left: 10px;

}
/* 客服头像 */
.search-portrait {
  width: 150px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
/* 设置框 */
.shezhi {
  width: 146px;
  height: 188px;
  background: #ffffff;
  box-shadow: 0 2px 6px 2px rgba(0,0,0,0.10);
  border-radius: 4px;

  position: absolute;
  top: 40px;
  left: -26px;
  z-index: 101;
}
.shezhi .xinshou {
  height: 44px;
  line-height: 54px;
}
.shezhi .tuichu  {
  height: 44px;
  line-height: 38px;
}
.shezhi .name{
  height: 50px;
  padding-top: 20px;
  box-sizing: border-box;
}
.shezhi div p {
  color: #adaeb0;
  margin-left: 22px;
  font-size: 14px;
  color: #4f4f56;
}
.shezhi .name p {
  color: #999999;
}
.shezhi .she {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
.shezhi1 {
  border-bottom: 1px solid #f6f6f6;
  /* line-height: 45px; */
}

/* 主页 */
.zhuye {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.zhuye1 {
  font-size: 20px;
  margin-left: 24px;
  width: calc( 100% - 300px);
  overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
display: flex;
  align-items: center;
  justify-content: flex-start;
}
.zhuye2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding-right: 24px;
}
.zhuyess{
  width: 116px;
  height: 32px;
  margin-right: 12px;
}
.zhuye3 {
  border: 1px solid #393939;
  font-size: 14px;
  width: 116px;
  height: 32px;
  line-height: 32px;
  color: #393939;
  border-radius: 4px;
  margin-right: 12px;
  background: #F7F7F7;
}
.zhuye3:hover{
  background: #fff;
}
.zhuye4 {
  text-align: center;
  position: relative;
  background: #393939;
  font-size: 14px;
  width: 116px;
  height: 32px;
  line-height: 32px;
  color: #ffffff;
  border-radius: 4px;
}
.zhuye4:hover{
  background: #4B4B4B;
}
.zhuye4 input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.zhuyekuang {
  width: 184px;
  height: 110px;
  background: #fff;
  border-radius: 5px;
  position: absolute;
  left: 0px;
  top: 35px;
  border: 1px solid #F1EFEF;
  box-shadow: 0 1px 3px 1px rgba(0,0,0,0.10);
  z-index: 101
}
.zhuyekuang1:hover {
  background: #f5f7fa;
}

.zhuyekuang1 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
}
.zhuyekuang1 img {
  width: 20px;
  height: 20px;
  margin-right: 18px;
}


























/* 常用 */
.changyong {
  width: 100%;
  /* height: 130px;
  overflow-x: hidden;
  overflow-y: scroll; */
}
.changyongqian{
  padding:  24px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
}
.changyong2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.changyongitem{
  width: 324px;
  height: 74px;
  margin-left: 24px;
  /* margin-top: 20px; */
  margin-bottom: 20px;
}
.changyong3 {
  width: 324px;
  height: 74px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;

  border-radius: 8px;
}

.changyong3:hover .chang3tu{
  display: block;
}
.changyong4{
 width: 326px;
  box-shadow: 0 3px 6px 2px #F7F7F7;
  margin-bottom: 10px;
  height: 76px;
  background: #fff;
  border-radius: 10px;
  position: relative;
}
.changyongxuanze{
  position: absolute;
  right: 15px;
  bottom: 31px;
}
.chang3-left {
  display: flex;
  align-items: center;
  width: 250px;
  
}
.chang3-left .c3-l-l {
  width: 30px;

  margin-left: 16px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chang3-left .c3-l-l div{
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chang3-left .c3-l-l img {
  width: 30px;
  /* height: 30px; */
}
.chang3-left .c3-l-r{
  width: 200px;
  overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.chang3-left .c3-l-r .c3-l-r-p1 {
  font-size: 16px;
  color: #333;
  width: 200px;
  overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.chang3-left .c3-l-r .c3-l-r-p2 {
  font-size: 12px;
  margin-top: 4px;
  color: #818D9B;
}
.chang3-right {
  /* width: 25px;
  height: 20px;
  margin-right: 15px; */
}
.chang3-right img {
  

}
.chang3tu{
  width: 36px;
  margin-right: 16px;
  display: none;
}
.disposiss{
display: block
}






















/* 最近 */
.lately {
  width: 100%;
  height: calc(100vh - 160px);

  /* position: relative; */
}
.latelyhead {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.headtitle {
  font-size: 16px;
  color: #4c555b;
  margin-left: 10px;
  font-weight: 600;
}
.shaixuanbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 84px;
}
.latelynr {
  height: calc(100vh - 230px);
  width: 100%;

  padding: 0px 0 120px 24px;

  overflow: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
}
.latelyitemli {
  height: 230px;
  width: 230px;
  float: left;
  /* overflow: hidden; */
}

.latelyitem {
  margin-right: 30px;
  margin-bottom: 30px;
  width: 200px;
  height: 200px;
  background: #fff;
  text-align: center;
  position: relative;
  /* overflow:hidden; */
  background: #FFFFFF;
  box-shadow: 0 3px 6px 2px #F7F7F7;
  border-radius: 12px;
}
.imgbox {
  width: 100%;
  /* height: 124px; */
  /* display: flex;
  justify-content: center;
  align-items: center; */
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  margin-bottom: 22px;
  padding-top: 38px;
  box-sizing: border-box;
}

.itemname {
  font-size: 16px;
  color: #5f5f65;
  /* margin-top:6px; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  min-width: 24px;
  max-width: 180px;
  margin: auto;
  height: 25px;
  line-height: 29px;
}
.namesss{
  width:128px;
}

.itemtime {
  font-size: 12px;
  margin-top: 4px;
  color: #99a2ad;
}
.clicktc {
  background: #fff;
  position: absolute;
  top: 36px;
  right: 12px;
  width: 176px !important;
  /* height: 240px; */
  z-index: 100;
  background: #FFFFFF;
  box-shadow: 0 1px 3px 1px rgba(0,0,0,0.10);
  border-radius: 4px;
  padding: 8px 0;
  box-sizing: border-box;
}

.latelyitem2 .clicktc {
  top: 50px;
  right: 20;
}

.clicktc > div {
  text-align: left;
  line-height: 38px;
  text-indent: 22px;
  width: 100%;
  height: 38px;
  font-size: 14px;
color: #4F4F56;
}
.clicktc > div:hover {
  background: #f2f2f2;
}

.xiazai {
  position: relative;
}
.erji {
  display: none;
  position: absolute;
  right: -132px;
  top: 0px;
  width: 130px;
  /* height: 56px !important; */
  background: #fff;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
  /* z-index:100; */
  border-radius: 4px;
  padding: 8px 0;
  
}
.erjileft{
  left: -132px!important;
}
.erji > div {
  text-align: left;
  line-height: 38px;
  text-indent: 20px;
  width: 100%;
  height: 38px;
  font-size: 14px;
}

.clicktc > div:hover .erji {
  display: block;
}

.erji > div:hover {
  background: #f2f2f2 !important;
}

.clicktc > div img {
  float: right;
  margin-right: 15px;
  margin-top: 15px;
}
.clicktc .xian {
  display: block;
  width: 100%;
  height: 1px;
  background: #f5f6f6;
  margin: 5px 0px;
}
.isshoucang {
  position: absolute;
  top: 0;
  left: 14px;
  width:20px;
  height:32px;
}
.isshengluehao {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
}

.latelynrhead {
  width: 100%;
  height: 40px;
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  padding-left: 32px;
  box-sizing: border-box;
}
.latelynrhead > div {
  width: 33.333%;
  line-height: 40px;
  font-size: 14px;
  color: #707a81;
  text-align: center;
}
.latelynrhead .name {
  text-align: left;
  font-size: 14px;
}
.latelynrhead .shijian {
  position: relative;
}
.latelyitem2 {
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #F0F0F0;
  display: flex;
  position: relative;
  padding-left: 32px;
  box-sizing: border-box;
  align-items: center;
}
.latelyitem2 > div {
  width: 33.333%;
  /* line-height: 70px; */
  font-size: 14px;
  color: #707a81;
  text-align: center;
}
.namelie {
  display: flex;
  /* justify-content: left; */
  justify-content: flex-start;
  align-items: center;
}
.namelie img {
  margin-right: 13px;
  width: 18px;
}
.namelie .itemname {
  text-align: left;
}

.tcpxbox {
  width: 184px;
  height: 128px;
  position: absolute;
  bottom: -128px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: #FFFFFF;
border: 1px solid #F1EFEF;
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.10);
border-radius: 4px;
}
.tcpxbox > div {
  line-height: 42px;
  text-indent: 20px;
  text-align: left;
  width: 100%;
  height: 40px;
  font-size: 14px;
  color: #393939;
}
.tcpxbox .ho {
   color: #4F4F56;
   font-weight: 552;
   background: #F2F2F2;
}
.tcpxbox .hoo:hover {
  background: #F2F2F2;
  color: #4F4F56;
}
.shangxia {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.qingkong {
  width: 50px;
  height: 30px;
  border: 1px solid #4c555b;
  text-align: center;
  line-height: 30px;
  color: #4c555b;
  font-size: 12px;
  margin-right: 24px;
}
.zanwu {
  /* display: block; */
  width: 100%;
  height: calc(100vh - 230px);
  position: relative;
}
.zanwu img{
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.shaixuan11 {
  position: relative;
  display: flex;
  align-items: center;
}
.shaixuan11tc {
  width: 196px;
  /* height: 300px; */
  background: #FFFFFF;
  border: 1px solid #F1EFEF;
  box-shadow: 0 2px 6px 2px rgba(0,0,0,0.10);
  border-radius: 4px;
  position: absolute;
  right: 0px;
  top: 20px;
  z-index: 101;
  padding: 10px 0;
  cursor: pointer;
}
.shaixuan11tc .lable {
  color: #717176;
  font-size: 10px;
  width: 100%;
  height: 34px;
  line-height: 34px;
  text-indent: 20px;
}
.shaixuan11tc .laitem {
  color: #4F4F56;
  font-size: 14px;
  width: 100%;
  height: 34px;
  line-height: 34px;
  text-indent: 20px;
}
.shaixuan11tc .laitem:hover {
  background: #F2F2F2;
}
.shaixuan11tc .xian {
  margin: 5px 0;
  width: 100%;
  height: 1px;
  background: #F0F0F0;
 
}

.shangchuantc {
  width: 400px;
  background: #fff;
  position: absolute;
  right: 24px;
  bottom: 24px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  /* max-height:390px; */
  overflow: hidden;
  /* overflow-y: scroll; */
  border-radius: 8px;
}
.itemhead {
  position: absolute;
  top:0;
  left:0;
  height: 50px;
  width: 100%;
  background: #f1f5ff;
  display: flex;
  justify-content: space-between;
  padding: 0 24px;
  box-sizing: border-box;
 
}

.displayflex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 200px;
  min-width: 90px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

.item {
  height: 60px;
  padding: 0 30px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.jindutiao {
  width: 254px;
  height: 4px;
  background: #e2eafa;
  position: relative;
  margin-top: 5px;
  border-radius: 2px;
  margin-bottom: 10px;
}
.lanse {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  background: #00d084;
  border-radius: 2px;
  box-shadow: 0 2px 4px 0 rgba(91,229,185,0.73);
}
.hongse {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  background: #FEB7B7;
}
.zhuangtai {
  font-size: 16px;
  /* font-weight:550; */
}
.caozuo {
  font-size: 14px;
  /* color: #566bff; */
  width:70px;
  height:100%;
  line-height: 50px;
  text-align: center;
  position: relative;
}
.zhongjian {
  width: 254px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* margin-top: 15px; */
}
.zhongjian .name {
  font-size: 12px;
  color: #8b8b8e;
  width: 190px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

/* 移动到 */
.yidongdao{
	width: 476px;
	height: 480px;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background: #fff;
  border-radius: 4px;
}
.yidongdao-cha{
	position: absolute;
	right: 13px;
	top: 13px;
	width: 16px;
	height: 16px;
}
.yidongdao-top{
	width: 100%;
	padding-left: 30px;
	padding-right: 30px;
	box-sizing: border-box;
}
.yidongdao-top-tit{
	height: 64px;
  padding-top: 28px;
  box-sizing: border-box;
	border-bottom: 1px solid #F8F8F8;
  font-size: 16px;
  color: #333333;
  font-weight: 600;
}
.yidongdao-top-search{
	height: 56px;
	position: relative;
}
.yidongdao-top-search input{
	width: 100%;
	height: 40px;
	padding-left: 45px;
	background: #F5F5F5;
	border-radius: 8px;
	box-sizing: border-box;
	margin-top: 10px;
	font-size: 14px;
}
.yidongdao-top-search-sousuotu{
	width: 16px;
	height: 16px;
	position: absolute;
	left: 14px;
	top: 22px;
}	
.yidongdao-bottom{
	border-top: 2px solid #F9F9F8;
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
  position: absolute;
  left: 0;
  bottom: 0px;
}
.yidongdao-bottom-left{
	font-size: 14px;
	color: #393939;
	margin-left: 30px;
}
.yidongdao-bottom-right{
	display: flex;
	align-items: center;
  margin-right: 30px;
}
.yidongdao-bottom-right-quxiao{
  width:64px;
  height:32px;
  line-height: 32px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #DFE0E3;
	color: #4D4D54;
	font-size:14px;
	margin-right:10px;

}
.yidongdao-bottom-right-tianjia{
	width:64px;
  height:32px;
  line-height: 32px;
  text-align: center;
  border-radius: 5px;
  background: #3B3B3B;
	color:#fff;
  font-size:14px;
}
.yidongdao-top-daohang{
  height: 295px;
  overflow-y: scroll;
}














.zuijinqian{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.selectbox {
  position: absolute;
  top: 16px;
  right: 16px;
}
.latelyitemactive {
  border: 1px solid #393939;
  box-sizing: border-box;
}
.latelyitembody{
  cursor: pointer;
}
.latelyitembody:hover .shengluehover {
  display: block;
}
.shengluehover {
  display: none;
}
.noclick {
  pointer-events: none;
}
.dibutc {
  border-top: 1px solid #dbdde0;
  width: calc(100vw - 240px);
  height: 60px;
  position: absolute;
  bottom: 0;
  right: 0;

  background-color: #fff;
}
.dibutcbox {

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
}
.dbbtn {
  /* width: 72px; */
  padding:0 20px;
  height: 36px;
  border: 1px solid #393939;
  text-align: center;
  line-height: 36px;
  margin-right: 16px;
  font-size: 14px;
  border-radius: 5px;
}

.dibutc img {
  margin: 0 14px;
}
.sc {
  color: #f54e49;
  border: 1px solid #f54e49;
}
.czbox {
  display: flex;
  justify-content: center;
  align-items: center;
}
.czbox-posi{
  position: relative;
  line-height: 0px;
  display: flex;
  align-items: center;
  height: 100%;
}
.xiazaixiaokuang{
  display: none;
  position: absolute;
  left: -100px;
  top:16px;
  width: 140px;
  /* height: 88px; */
  background: #FFFFFF;
  box-shadow: 0 1px 3px 1px rgba(0,0,0,0.10);
  border-radius: 2px;
  z-index: 99;
  text-align: left;
  /* padding-left: 30px; */
  /* box-sizing: border-box; */
  text-indent: 30px;
}
.czbox-posi:hover .xiazaixiaokuang{
  display: block;
}

.yuanshiwenjian{
  width: 100%;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  color: #4F4F56;
}
.yuanshiwenjian:hover,.zhidubanben:hover,.dabaoxiazai:hover {
  background: #f2f2f2;
}
.zhidubanben{
  width: 100%;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  color: #4F4F56;
}
.dabaoxiazai{
   width: 100%;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  color: #4F4F56;
}
.czbox img {
  margin: 0 24px;
}
.dwslh {
  position: relative;
}

/* 设置头像点击弹出更改框 */
.gaikuang {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 476px;
  height: 324px;
  background: #fff;
  padding: 0 38px;
  box-sizing: border-box;
  border-radius: 4px;
}
.gai1 {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #f8f8f9;
  font-size: 16px;
  color: #333;
}
.gai2 {
  width: 100%;
  margin-top: 30px;
  display: flex;
  align-items: center;
}
.gai2 img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin-right: 30px;
  margin-left: 10px;
}
.gaibutton {
  width: 100px;
  height: 32px;
  border: 1px solid #393939;
  background: #fff;
  font-size: 14px;
  color: #333;
  border-radius: 5px;
}
.gaibutton .upload{
  width: 100px;
  height: 32px;
  border: none;
  border-radius: 4px;
}
.gai3 {
  width: 100%;
  margin-top: 26px;
  display: flex;
  align-items: center;
}
.gai3 p {
  font-size: 14px;
  color: #333;
  /* margin-right: 40px;
  margin-left: 20px; */
}
.gai3 .gai3xingming{
  width: 72px;
  /* height: 72px; */
  margin-right: 30px;
  margin-left: 10px;
  /* line-height: 72px; */
  text-align: center;
}
.gai3 input {
  width: 252px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #999999;
  padding-left: 10px;
  box-sizing: border-box;
}

/* 重命名样式    删除框样式    分享*/
.querenshanchu {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
}
.querenshanchu .box {
  width: 398px;
  height: 180px;
  background: #fff;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 30px;
  box-sizing: border-box;
}
.cha {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 16px;
  height: 16px;
}
.box .tishi {
  height: 64px;
  line-height: 64px;
  font-size: 16px;
color: #333333;
font-weight: 600;
}
.tishiyu {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: #4d4d54;
}
.buttombox {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.buttombox > div {
  width: 64px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 5px;
}
.buttombox .btn1 {
  border: 1px solid #dfe0e3;
  color: #4d4d54;
  font-size: 14px;
  margin-right: 10px;
}
.buttombox .btn2 {
   width: 64px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 4px;
      padding: 0px 0px;
  color: #fff;
  font-size: 14px;
  background: #D0D0D0;
  /* opacity: 0.24; */

}
.buttombox .shanchubtn2 {
  background: #3b3b3b;
  color: #fff;
  font-size: 14px;
}
.inputboxcmm {
  width: 324px;
  height: 40px;
  background: #F5F5F5;
  margin-right: 8px;
  border-radius: 4px;
  margin-top: 10px;
}
.inputboxcmm input {
  color: #717176;
  width: 324px;
  height: 40px;
  font-size: 14px;
  padding: 5px 10px;
  box-sizing: border-box;
  font-weight: 660;
}
.xianfx {
  width: 100%;
  height: 1px;
  background: #f6f6f6;
}
.codeimgbox {
  padding: 30px 0;
  text-align: center;
}
.codeimgbox img {
  width: 112px;
  height: 112px;
}
.codeimgbox div {
  font-size: 16px;
  color: #4d4d54;
  margin-top: 20px;
}
.disflex {
  display: flex;
  width: 100%;
  height: 31px;
  align-items: center;
  justify-content: flex-start;
  margin: 28px 0;
  margin-bottom: 42px;
}
.fuzhi {
  width: 72px;
  height: 40px;
  background: #393939;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  margin-top: 10px;
}



/* 高级搜索框 */
.gaojikuang {
  width: 920px;
  height: 720px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 0 28px;
  box-sizing: border-box;
  border-radius: 8px;
}
.gaojitop {
  width: 100%;
  height: 94px;
  position: relative;
}
.gaojitop-sousuo {
  width: 22px;
  height: 22px;
  position: absolute;
  left: 22px;
  top: 42px;
}
.gaojitop-cha {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 0;
  top: 30px;
}
.gaojitop input {
  width: 760px;
  height: 46px;
  background: #f5f5f5;
  border-radius: 10px;
  padding-left: 70px;
  box-sizing: border-box;
  font-size: 14px;
  color: #393939;
  margin-top: 30px;
}
.gaojizhong {
  width: 100%;
  height: 60px;
}
.gaojizhong1 {
  background: #fff;
  border: 1px solid #d0d0d0;
  width: 144px;
  height: 36px;
  font-size: 14px;
  border-radius: 5px;
  color: #333;
}
.gaojizhong2 {
  background: #fff;
  border: 1px solid #d0d0d0;
  width: 144px;
  height: 36px;
  font-size: 14px;
  margin-left: 20px;
  border-radius: 5px;
  color: #333;
}
.gaojibuttonyanse {
  background: #393939;
  color: #fff;
}
/* 下面 */
.gaojixia {
  display: flex;
  justify-content: space-between;
}
/* 左边 */
.gaojixia .gaojixia-left {
  width: 664px;
  height: 560px;
  overflow-y: scroll;
}
.gaojixia-left-item {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;
}
.gaojixia-left-item:hover {
  background: #f2f2f2;
}
.gaojixia-left-item img {
  width: 26px;
  margin-right: 14px;
  margin-left: 10px;
}
.gaojixia-left-item-wenben1 {
  font-size: 15px;
  color: #333;
}
.gaojixia-left-item-wenben2 {
  font-size: 12px;
  margin-top: 4px;
  color: #818d9b;
}
/* 暂无内容 */
.zanwukuang {
  width: 430px;
  height: 342px;
  margin: auto;
  font-size: 14px;
  color: #333;
  text-align: center;
  padding-top: 100px;
  box-sizing: border-box;
}
.zanwukuang img {
  margin: auto;
  display: block;
  width: 206px;

}
.zanwukuang div{
  margin-top: 10px;
}
/* 右边 */
.gaojixia-right {
  width: 200px;
  height: 560px;
}
.gaojixia-right-box {
  font-size: 14px;
  color: #333333;
  margin-bottom: 20px;
}
.gaojixia-right-box-tit{
  margin-bottom: 15px;
  font-weight: 600;
}


.xinjian {
  border: 1px solid #999;
}
.df {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.jc{
  font-weight: 600;
  color: #333;
  background: #F2F2F2;
}
.selectqianactive{
  background: #2D2D2D;
  
}

.ccslh{
  /* width: 100%; */
  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
  font-size: 16px;
}


.xinjian{border:1px solid #999;}
.df{display:flex;align-items:center;justify-content:flex-start;font-size: 14px;padding: 0 15px 0 0;}


.changyongdingwei{
  position: fixed;
  bottom: 0;
  right: 0;
  width: calc(100% - 240px);
  height: 60px;
}
.changyongdibutc{
  border-top: 1px solid #dbdde0;
 background: #FFFFFF;
  width: 100%;
  height:60px;
  display: flex;
  align-items: center;

}
.changyongdibutc img{
  margin: 0 14px;
}

.upload{
  width: 100%;
  height:55px;
  position: absolute;
  top:0;
  left:0;
  z-index:100;
  
}

.height{
  height: calc(100vh - 290px)!important;
}
.height1{
  height: auto!important;
}

#canvasId{
  position: fixed;
  top:0;
  left:0;
  /* background: rgba(0, 0, 0, 0.5); */
  z-index:1000;
}
.step1{
  width:250px;
  height:90px;
  position: fixed;
  top:200px;
  right: 15px;
  background: #393939;
  z-index:1001;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-radius: 10px;
  padding: 10px 0;
  box-sizing: border-box;
  /* align-items: center; */
}

.step3{
  top:350px!important;
  left:310px!important;
}

.step2 .sanjiaoup1{
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;

  border-right:10px solid #393939;
  
  position: absolute;
  left:-10px;
  top:50%;
  transform: translate(0,-50%);
}

.step2{
  top:150px!important;
  left:260px!important;
}
.steptishi{
  font-size: 16px;
  text-align: center;
}
.stepbtn{
  opacity: 0.7;
  border: 1px solid #FFFFFF;
  border-radius: 13px;
  text-align: center;
  width: 80px;
  height:26px;
  line-height: 26px;
  margin:0 auto;
}
.stepnext{
  font-size: 14px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.sanjiaoup{
  width:0;
  height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid #393939;
  position: absolute;
  top:-10px;
  left:50%;
  transform: translate(-50%,0);
}
.bcuserinfo{
  width: 110px;
  height: 32px;
  background: #3B3B3B;
  color: #fff;
  margin:auto;
  line-height: 32px;
  text-align: center;
  margin-top:40px;
  border-radius: 4px;
}
.shoushou{
  cursor: pointer;
}
.over{
  overflow: hidden;
  overflow-y: scroll;
}

.isshengluehaolie{
  width: 64px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.isshengluehaoliess{
  width: 64px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.isshengluehaolieimg{
  height: 4px;
}
.isshengluehaoliess .ppp{
  position: absolute;
  left: -128px;
  top: 50px;
}
.box .chongmingmingtishi{
  height: 60px;
  line-height: 20px;
  padding-top: 30px;
  box-sizing: border-box;
  font-size: 20px;
  color: #333333;
}
.disposi{
  position: absolute;
}
.hei{
  background: #393939!important;
}
.itemxx{
  height: 50px;
  /* padding: 0 24px; */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  /* justify-content: space-between; */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.box .fenxiangtishi{
  line-height: 22px;
  padding-top: 28px;
  box-sizing: border-box;
}

</style>
<style >
.el-loading-mask{
  background-color: rgba(0,0,0,.5);
}
</style>






















